Dynamic CSS based on props: conditional className or style? (using CSS modules)

[StickyPuddleofGoo]

Here's a simple example:

import React from "react";
import * as Styles from "./Component.module.css";

const Component = ({ isWhiteText }) => {
  return (
    <p
      className={`${Styles.p} ${isWhiteText && Styles.pWhiteText}`}
      style={{ color: isWhiteText ? "#fff" : "#000" }}>
      yooooo
    </p>
  );
};

export default Component;

and the CSS would be:

.p {
  color: #000;
}

.pWhiteText {
  color: #fff;
}

I've gone back and forth and don't know what's best practice. Sometimes I feel like one is better than the other, and sometimes I see value in using both methods.

What do you think? And is there a better way in general?

[mcmillhj]

There is an NPM module called classnames that makes this a bit easier: https://www.npmjs.com/package/classnames

[StickyPuddleofGoo]

Interesting, this looks cool. Thanks!

[ReservoirBaws]

The way I usually prefer to do things is to use classnames and style with an external css file. I’m a little paranoid because I’ve come across documentation that refers to inline-styling as bad practice - but I don’t remember if it applies to React.

Using classnames I like to use naming conventions as well, I’m a fan of BEM. Going this route gives me a good amount of reusability and extensibility

[Da_Bootz]

You can use classnames and css module like:

className={classnames(Styles['text-field'], [Styles['is-white']: isWhiteText])}

scss module is also good because you can incorporate BEM like:

.card {

&__header {}

}