This is specific to React and CSS Modules and not relevant if you are using CSS-in-JS.
Lets say we have a ‘panel’ component that we want to create:
import * as styles from './Panel.module.css'
export default () => (
<div classname={styles.panel}>…</div>
)
The resultant HTML will look something like this depending on how you set things up with webpack:
<div class="Panel_panel">…</div>
Lets say we want to add another class to our Panel
, this is what it would look like using the classnames package
import cn from 'classnames'
import * as styles from './Panel.module.css'
export default () => (
<div classname={cn(styles.panel, styles.primary)}>…</div>
)
HTML:
<div class="Panel_panel Panel_primary">…</div>
This is not really very useful because we probably want to add the extra classes as and when they are needed when rendering the component ie. not every Panel
component is going to be primary. For the sake of this demo there are two situations when we want to add a class to our panel component:
.info
, .warning
, .danger
and .success
First we want to tell our panel component to expect the theme
prop and that it will be a class that appears in the associated stylesheet:
import cn from 'classnames'
import * as styles from './Panel.module.css'
export default (theme) => (
<div classname={cn(styles.panel, styles[theme])}>…</div>
)
This is how we would render the component on the homepage and apply a theme class of .primary
:
import Panel from '../Panel';
export default () => (
<Panel theme="primary"} />
)
HTML:
<div class="Panel_panel Panel_primary">…</div>
In our panel component:
import cn from 'classnames'
import * as styles from './Panel.module.css'
export default (className) => (
<div classname={cn(styles.panel, className)}>…</div>
)
Special instance of a panel on the homepage:
import Panel from '../Panel'
import * as styles from './Home.module.css'
export default () => (
<Panel className={styles.homePanel} />
)
HTML should look something like this:
<div class="Panel_panel Home_homePanel">…</div>
Allowing for both a context specific class and theming.
In our panel component:
import cn from 'classnames'
import * as styles from './Panel.module.css'
export default (className, theme) => (
<div classname={cn(styles.panel, styles[theme], className)}>…</div>
)
Instance of the panel on the homepage with both a context specific class and a theme being applied:
import Panel from '../Panel'
import * as styles from './Home.module.css'
export default () => (
<Panel className={styles.homePanel} theme="primary" />
)
HTML should look something like this:
<div class="Panel_panel Panel_primary Home_homePanel">…</div>