CODEWITHSUNDEEP
reactjsreact-reduxmaterial-ui
Montu Patel
Montu Patel

Reputation: 115

How do i set primary light/dark color to components of Material-ui ? i am using custom theme like here

here is link of docs of how to customize theme

The above link has Object that we can configure the theme object. But default it take primary-main color, what if i want to access primary-dark . how to access primary dark ?

Upvotes: 10

Views: 14455

Answers (1)

wiesson
wiesson

Reputation: 6832

You could set the dark theme to default like this:

// ... imports ... 
const theme = createMuiTheme({
  palette: {
    type: 'dark',
  }
});

ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root')
);

For each theme you have primary and secondary colors. For primary e.g. primary.light, primary.main and primary.dark.

In your component, you can access the theme variables like this:

// ... imports ... 
const styles = theme => ({
  darkColor: {
    color: theme.palette.primary.dark // or theme.palette.primary.main
  } 
})

const StatelessMyComponent = ({ classes }) => 
  <div className={classes.darkColor}>Look at my dark color! :)</div>;

export withStyles(styles)(StatelessMyComponent);

Upvotes: 11

Related Questions