Skip to content

Files

Latest commit

 

History

History
52 lines (44 loc) · 1.25 KB

theming.md

File metadata and controls

52 lines (44 loc) · 1.25 KB
CSS Modules Logo

Theming

Instead of importing a style in the component, the component can take a style as property. This way different themes can be used. The user can even define custom themes.

/* component/theme-a.css */
.outer {
  background: green;
}
.inner {
  color: blue;
}
/* component/theme-b.css */
.outer {
  background: red;
}
.inner {
  color: yellow;
}
/* component/index.js */
export function Component({ theme }) {
  return (
    <div className={theme.outer}>
      <div className={theme.inner} />
    </div>
  );
}
import themeA from 'component/theme-a.css';
import themeB from 'component/theme-b.css';
import customTheme from './custom-theme.css';

import {Component} from 'component';

<Component theme={themeA} />
<Component theme={themeB} />
<Component theme={customTheme} />