How to extend styles in react component?-CodePudding

I have a task when I need to extend the styles of a certain element. I take the basic styles through the module, and the additional ones will need to be done inside the function that will be in the component.
How can I extend the styles inside the component if I have already added styles from the module there?

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

const optionalStyles = {
  margin: "30px"
}


<p className={`${style.subtitle} ${optionalStyles}`}>42</p>

CodePudding user response：

<p style={optionalStyles} className={`${style.subtitle}}>42</p>

CodePudding user response：

You can:

Create another class inside your styles.module (or any other module) and add it conditionally:

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

<p className={`${style.subtitle} ${someCondition ? style.otherStyles : ''}`}>42</p>

Use inline styles:

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

const optionalStyles = {
  margin: "30px"
}

<p className={style.subtitle} style={someCondition ? optionalStyles : {}}>42</p>