CODEWITHSUNDEEP
javascriptreactjs
randomdev
randomdev

Reputation: 100

Handling React reusable component styling dynamically?

I am working on a side project that has a React frontend and I have stumbled into a slight issue. I find myself constantly adding props to a reusable component, in order to change the styling.

For example, imagine you have a component. In one scenario you would like it to pave a padding of "10px 20px", and in another scenario is has to be "8px". I'm trying to re-use as many components as possible, but passing down this many props to alter margins and paddings seems a little tedious.

Is there any sort of React Component pattern that could help with this? I've been looking into many patterns like 'render props' or the Compound Component pattern, however they are all great when logic is involved. This problem involves no logic - just styling, which is why passing props feels like overkill.

Any suggestions are welcome and thanks in advance.

Upvotes: 0

Views: 1514

Answers (2)

Yatrix
Yatrix

Reputation: 13775

Just pass the css into the component for overrides. Something like,

const Component = ({css}) => {
    const {firstNameCss, lastNameCss} = css

    return (<div>
               <div id="firstName" className={`${defaultFirstNameCss} ${firstNameCss}`}>
               <div id="lastName" className={`${defaultLastNameCss} ${lastNameCss}`}><div></div>
           </div>
    )
}

There's also a handy helper package you could use, classnames for this as well.

Upvotes: 0

Boykov
Boykov

Reputation: 374

I think in your case is question about composition.

You can pass to your component how it should react based on 'place' but you can use component as it is. And make place correct its behaviour for content.

For example you have CardComponent

You can write it like that

const CardComponent = (props) => {
  return (
    <div className={props.cardClasses} styles={props.cardStyles}>
      <div className={props.titleClasses} styles={props.titleStyles}>
         Title
       </div>
      <div  className={props.contentClasses} styles={props.contentStyles}>
         {props.children}
       </div>
    </div>
  )
}

I used classes and styles because it's faster to write) In the case above you need to pass lots props to styles this component. But you can split it to smaller components CardComponent, CardTitle and CardContent

const CardTitle = (props) => {
  return (
      <div className={props.titleClasses} styles={props.titleStyles}>
         {props.children}
       </div>
  )
}

const CardContent = (props) => {
  return (
      <div className={props.contentClasses} styles={props.contentStyles}>
         {props.children}
       </div>
  )
}
const CardComponent = (props) => {
  return (
    <div className={props.cardClasses} styles={props.cardStyles}>
      {props.children}
    </div>
  )
}

And use it like that

<CardComponent>
  <CardTitle>Title</CardTitle>
  <CardContent>content</CardContent>
</CardComponent>

In that case you can style them separately and even extend/reuse some other components as child of CardComponent

Upvotes: 1

Related Questions