Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

To apply the main color in a MUI theme, you can use the palette.primary.main property.

Here's an example of how to set the main color to blue:

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#2196f3',
    },
  },
});

Once you have created the theme, you can use it in your application by wrapping it around your components with the ThemeProvider component.

import React from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import { Button } from '@material-ui/core';

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">
        Click me!
      </Button>
    </ThemeProvider>
  );
};

This will create a blue button with the main color set to #2196f3. You can apply the main color to other components in a similar way.