React — Passing props with styled-components

Question

I just read in the styled-components documentation that the following is wrong and it will affect render times. If that is the case, how can I refactor the code

Answer 1

I believe what the documentation is saying is that you should avoid including your styles inside of the rendering component:

DO THIS

const StyledWrapper = styled.div`
  /* ... */
`

const Wrapper = ({ message }) => {
  return {message}
}

INSTEAD OF THIS

const Wrapper = ({ message }) => {
  // WARNING: THIS IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!
  const StyledWrapper = styled.div`
    /* ... */
  `

  return {message}
}

Because what happens is when the component's Props changes, then the component will re-render and the style will regenerate. Therefore it makes sense to keep it separate.

So if you read further on to the Adapting based on props section, they explain this:

const Button = styled.button`
  /* Adapt the colours based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// class X extends React.Component {
//  ...

render(
  

    Normal
    Primary
  
);

// }

this works because when you use the Button component in class X, it will know the props of class X without you having to tell it anything.

For your scenario, I imagine the solution would be simply:

const TabWrapper = styled.li`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px;
  margin: 1px;
  font-size: 3em;
  color: ${props => (props.isSelected ? `white` : `black`)};
  background-color: ${props => (props.isSelected ? `black` : `#C4C4C4`)};
  cursor: ${props => (props.isSelected ? 'default' : `pointer`)};
`;

const Tab = ({ onClick, isSelected, children }) => {
  return {children}
}

const X =  console.log('clicked')} isSelected>Some Children

I haven't tested this at all, so please feel free to try it out and let me know if it works for you or whatever worked for you!