React.js | Styling via Props vs. Writing CSS-in-JS

Question

Various libraries offer styling solutions via props of components, while the "standard" way for a long time has been to write CSS, separately.

With the invention of CSS-in-JS, it's now possible to have some benefits we didn't have before (e.g string literals, conditional classes, plugins to extend functionality, etc.), and on the separation level, it can be used like CSS style tags in HTML, where it's possible to define in the "main" file (HTML, in the case of CSS) an environment to write the code in, and we have more flexibility, but with JSS, for example, it's a common practice, from my understanding, to centralize the styling code in a classes object.

On the other hand, we can write not just inline CSS in components, but various libaries offer styling solutions as props of components such as Material-UI.

So, my question is: what advantages pros and cons do you think there are for writing CSS-inJS compared to writing styling code using component props?

*Disclaimer: I don't have a lot of experience with CSS-in-JS and styling in React in general, so I might have a wrong impression of what things are like generally/in the bigger picture.

*Do notice that I'm not asking about inline-CSS in components and that this is not an inline vs non-inline question, but a more specific one.

Answer 1

You ask about the Pros/Cons for those cases:

Dynamic className

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function App() {
  const classes = useStyles();
  return <Button className={classes.root}>My Button</Button>;
}

Which is just a nicer implementation of:

import './myStyle.css'

export default function App({ styleName }) {
  return <Button className={styleName}>My Button</Button>;
}

Pros:

• Simple and straight forward.

Cons:

• Writing CSS-like object (not real CSS).
• Such implementation is decoupled to the UI library
  • There may be a library that can be used across projects, but still, why just not using CSS-in-JS with it is the case?

CSS-in-JS

const PrettyButton = styled(Button)`
  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
  border: 0;
  borderradius: 3;
  boxshadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);
  color: white;
  height: 48;
  padding: 0 30px;
`;

export default function App() {
  return <PrettyButton>My Button</Button>;
}

Pros:

• Writing a real CSS (you get auto-complete, CSS formatting, style-linting, not writing string literals which are error-prone, etc.)
• CSS-in-JS benefits (Google it).

Cons:

• The debate of why not to use CSS-in-JS (Google it).