React - is it best practise to pass styles and content as props to children?-CodePudding

When rendering children (for example modals, popups etc), is it considered good practise to pass the styles and text as props to children (even if its a lot)? Or to render all the content as children?

const Parent = () => {
    return (
      return <PopUp style={{...all the styling}} title={title} otherText={otherText}/>
    )
};

const PopUp = ({style, title, otherText}) => {
  const [visible, setVisible] = useState(false);
    const toggleDialog = () => {
        setVisible(!visible);
    };
    return (
      <div>
      ...content
      ...buttons
      </div>
    )
}

or to render as children:

const Parent = () => {
    return (
      return (
        <PopUp>
        <Button style={{}}/>
        <h1>title</h1>
        ...
        </PopUp>
      )
    )
};

const PopUp = ({children}) => {
  const [visible, setVisible] = useState(false);
    const toggleDialog = () => {
        setVisible(!visible);
    };
    return (
      <div>
      {children}
      </div>
    )
}

CodePudding user response：

For every types of popup, I think it have diff common APIs:

Modal:

title:
footer
custom styling: className, style inline
children: content

Popover:

placement
fixed position
custom styling: className, style inline
children: content

You can refer these UI Component's API system: Antd, MUI libraries.

CodePudding user response：

Why not create a main style to use this? I think the best way is to use a file with CSS and import the example style: import './index.css'; Remember, use the same classNames