CODEWITHSUNDEEP
reactjsmaterial-uithemes
Laczkó Örs
Laczkó Örs

Reputation: 1118

Material-UI custom theming

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?

Upvotes: 2

Views: 2952

Answers (1)

Michael
Michael

Reputation: 1872

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'))

Upvotes: 1

Related Questions