Ask Your Question
4

How to apply the main color in Mui Theme?

asked 2022-08-02 11:00:00 +0000

woof gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
2

answered 2021-07-16 15:00:00 +0000

lalupa gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2022-08-02 11:00:00 +0000

Seen: 16 times

Last updated: Jul 16 '21