semantic ui: className doesn't work while style does-CodePudding

Adding the style property works

<Card.Meta style={{ color: "#5D5C5C" }}>
  {calculateTime(post.createdAt)}
</Card.Meta>

While adding class does not:

<Card.Meta className="my-color">
  {calculateTime(post.createdAt)}
</Card.Meta>

What would you recommend to do in such case? I would prefer not to repeat inline styling

CodePudding user response：

About this issue, you might want to use CSS module, it's still CSS, but only affect in one component only.

Note: this would prefer to work with React app and webpack, I haven't tested with other environment =)))

File structure:

|
|_ MyComponent.module.css
|_ MyComponent.js

MyComponent.module.css:

.myColor {
  color: #5D5C5C;
}

MyComponent.js:

import styles from './MyComponent.module.css';

...

<Card.Meta className={{styles.myColor}}>
  {calculateTime(post.createdAt)}
</Card.Meta>

CodePudding user response：

Kind of stupid of me, you can just add a div inside and then apply the class to it