fds-mui-theme

3.8.168 • Public • Published

fds-mui-theme

Getting started

yarn install fds-mui-theme

Usage

Apply base theme to your app

import theme from 'fds-mui-theme';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 
const appTheme = createMuiTheme(theme);
 
const App = () => (
  <MuiThemeProvider theme={appTheme}>
    <Root />
  </MuiThemeProvider>
);

Nesting themes for specific features

Some features have their own secondary color. You can nest theme providers to accomplish this...

import theme from 'fds-mui-theme';
import { violet } from 'fds-dictionary/dist/js/materialPalette';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 
const appTheme = createMuiTheme(theme);
 
// Create a feature-specific theme in which the secondary
// color is Form Design System violet
const featureTheme = createMuiTheme({
  ...theme,
  palette: { secondary: violet }
})
 
const Container = () => (
  <Fragment>
    <MuiThemeProvider theme={appTheme}>
      <p>This area uses a default app theme</p>
    </MuiThemeProvider>
    <MuiThemeProvider theme={featureTheme}>
      <p>This area uses our custom app theme</p>
    </MuiThemeProvider>
  </Fragment>
);

Readme

Keywords

none

Package Sidebar

Install

npm i fds-mui-theme

Weekly Downloads

3

Version

3.8.168

License

MIT

Unpacked Size

3.59 kB

Total Files

4

Last publish

Collaborators

  • meetparekh09
  • pmallela-cbi
  • zach.muir.cbi
  • joshua.fernandes14
  • aabbi
  • daniel.stillman
  • lyonscbi
  • jefferson.cbi
  • harley.hicks.cbi
  • jalfano
  • mateogo42
  • recheverria-cbi
  • hazel0109
  • gaurav.mahajan
  • brycekjosness
  • eric.ely
  • cbedwinotalvaro
  • nathalia.camacho
  • ayman.salloum
  • jtyson728
  • giovanni.garcia
  • ihernandez-cbi
  • cbi-devops
  • kchun
  • yyan
  • vfong-cbi
  • jnico-cbi
  • mbalady
  • gshen-cbi
  • cliu-cbi
  • tli-cbi
  • mchoe
  • jpeffley-cbi
  • cjlew
  • shajyahya
  • dkeefe
  • rbednarz
  • jbroderick-cbi
  • amatiyev
  • awebb-cbi
  • amestel
  • kchen-cbi
  • kyle.yost
  • tblyler-cbi
  • pcorujo
  • daguilar-cbi
  • jmeli-cbi
  • zstuart-cbi
  • akdetrick
  • adetrick