CODEWITHSUNDEEP
reactjsmaterial-ui
user3601578
user3601578

Reputation: 1362

MaterialUI theme does not change typography color

I am trying to change the color of Typography using a theme but it does not change the color. The color of "Hallo World 1" is still #3f51b5 and the color of "Hallo World 2" is rgba(0, 0, 0, 0.87).

I will accept any answer that does not include styling/css.

import { ThemeProvider } from '@mui/styles'
import { createTheme, Typography } from "@material-ui/core"
import createPalette from '@material-ui/core/styles/createPalette'

function App() {
  return (
    <>
    <ThemeProvider theme={createTheme({
        palette: createPalette({
          primary: { main: 'rgb(255, 0, 0)', contrastText: '#fff' },
          text: {
            primary: 'rgb(0, 255, 0)',
          }
      })
    })}>
      <Typography color="primary">
          Hallo World 1
      </Typography>
      <Typography color="textPrimary">
          Hallo World 2
      </Typography>      
    </ThemeProvider>      
    </>
  );
}

export default App;

Upvotes: 1

Views: 2055

Answers (1)

Aitwar
Aitwar

Reputation: 903

Take a look at your ThemeProvider import. It reaches out to @mui/styles package. On the other hand, your Typography imports use @material-ui/core. That's the problem. Exports from Material UI v4 don't use theme from Material UI v5.

You should use @mui/* or @material-ui/* only, so import ThemeProvider from @material-ui/core instead or the other way - import all other Material UI related thingies from @mui/* family.

Upvotes: 1

Related Questions