Material-UI custom theming

user_11423459 0
Viewed 1944

I want to create a custom theme and customize some Material-UI components. I followed this customization tutorial provided by Material-UI. With this, I was able to do the following:

Creating costume theme:

//MUI THEMING
import {
  createMuiTheme,
  makeStyles,
  ThemeProvider,
} from "@material-ui/core/styles";

import Theme from "./../../theme";

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: Theme.palette.primary.main,
  },
}));

const theme = createMuiTheme({
  normal: {
    primary: Theme.palette.primary.main,
    secondary: Theme.palette.secondary.main,
  },
});

Using costume theme:

 <ThemeProvider theme={theme}>
    <AppBar
      position="static"
      classes={{
        root: classes.root,
      }}>
      ...
    </AppBar>
  </ThemeProvider>

As expected, this resulted in a costume colored AppBar: enter image description here

However, when I tried the same with bottom navigation, -trying to change the default primary color-, I could not get it to work. I figured that based on the tutorial, I have to use "&$selected": in the create them to get it to work, but even with this my best result was something like this:

enter image description here

How do I change the primary color of Bottom Navigation with no label?

Sidenote: While I was searching for the solution, I stumbled on the default theme ovject. How can I access this, how can I overwrite it?

material-ui reactjs themes
1 Answers

In my project, I create a global MUI theme to override the default theme. In makeStyle you can pass a param theme in the callback function like this to get the whole MUI theme object:

const useStyles = makeStyles(theme => {
  console.log(theme) // print mui global theme object
  return {...your classes here}
})

After that, copy this object to a new file like muiTheme.js to create your own theme. Change these values in this object that you want to override.

// muiTheme.js

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

const theme = createMuiTheme({
 breakpoints: {
  keys: ['xs', 'sm', 'md', 'lg', 'xl'],
  values: {
   xs: 0,
   sm: 600,
   md: 960,
   lg: 1280,
   xl: 1920,
  },
 },
  ...
})

export default theme
Then, in index.js, use ThemeProvider to override MUI's theme.

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

import muiTheme from './theme/muiTheme'

import App from './App'

const Root = () => (
 <BrowserRouter>
  <ThemeProvider theme={muiTheme}>
    <App />
  </ThemeProvider>
 </BrowserRouter>
)

ReactDOM.render(<Root />, document.getElementById('root'))

user_95482850
Related