CODEWITHSUNDEEP
reactjsmaterial-ui
tmp
tmp

Reputation: 41

MUI 5 theme - globally customize typography and color palette

Using MUI 5, I'm looking to use ThemeProvider and createTheme to set the font-family and color palette across all MUI components used.

I'm using this installation of mui:

npm install @mui/material @mui/styled-engine-sc styled-components

Using the Typography component, this did not work:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  typography: {
    fontFamily: myFontFamily,
  },
})

const MyComponent = () => (
  <ThemeProvider theme={theme}>
    <Typography>Hello, World</Typography>
  </ThemeProvider>
)

while this did work:

const theme = createTheme({
  typography: {
    fontFamily: myFontFamily,
  },
  components: {
    MuiTypography: {
      defaultProps: {
        fontFamily: myFontFamily,
      },
    },
  },
});

Similarly, trying to globally override the background color of Chip, for example, setting theme.palette.primary did not get applied to <Chip color="primary" />.

const theme = createTheme({
  palette: {
    primary: {
      main: myHexColor,
    },
  },
})

const MyComponent = () => (
  <ThemeProvider theme={theme}>
    <Chip label="Hello, World" color="primary" />
  </ThemeProvider>
)

I am struggling to find a way to globally override these styles without having to apply them to every component and component variant we want to use. Is it possible to do this?

Upvotes: 2

Views: 4417

Answers (2)

hotcakedev
hotcakedev

Reputation: 2504

I am pretty sure this will work for you.

// App.js
import React from 'react';
import { createTheme } from '@mui/material/styles';
import { StylesProvider } from '@mui/styles';

const App = () => {
  const theme = createTheme({
    palette: {
      primary: {
        main: '#000',
      },
      secondary: {
        main: '#fff',
      },
      // whatever colors you want to include
      // Please refer to the following for more details
      // https://mui.com/customization/default-theme/#explore
    },
    // Here you could add global styles what you exactly want
    component: {
      typography: {
        styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          fontFamily: myFontFamily,
          // regarding the code you posted, there is no props like fontFamily, so you can't add it to the defaultProps, you can look into the Typography APIs
          https://mui.com/api/typography/#props
        },
      },
      chip: {
        root: {
          backgroundColor: someColor
          // color props should work color="primary" and be applied the primary color #000
        }
      }
    }
  });

  return (
    <ThemeProvider theme={theme}>
      <StylesProvider>
        {/* children */}
      </StylesProvider>
    </ThemeProvider>
  );
};

export default App;

You don't need to include ThemeProvider for children components, just use it for root element specifically App.js.

I mean it's enough to use one ThemeProvider and one theme object in general.

If you want to customize a specific component, then please use classes and classname props for the component. https://mui.com/styles/advanced/#makestyles

Upvotes: 0

tmp
tmp

Reputation: 41

A friend helped me out with this. It turns out that I missed this documentation on the Styled Engine guide for how to use styled-components as the styling engine. Instead of going down that route, I ended up just installing @emotion/react and @emotion/styled which are included with react-select anyways.

Upvotes: 1

Related Questions