Typography component not accepting 'color' inside sx

user_15680343 0
Viewed 263

I've been experiencing an issue in which I cannot apply 'color' inside the 'sx' property of a Typography component. Does anyone know what might be causing the issue?

image of the result

Removing the 'color' key causes the color of the 2 line to be reverted to default (same as the 1st line).

import React from 'react';
import {Box, createTheme, CssBaseline, Typography} from '@mui/material';
import {ThemeProvider} from '@mui/styles';

const theme = createTheme({
  palette: {
    mode: 'dark',
  },
});

console.log(theme);

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box
        sx={{
          height: '100%',
          bgcolor: 'background.paper',
          color: 'text.primary',
        }}>
        1111111111111111
        <Typography sx={{color: 'text.secondary'}}>
          22222222222222222
        </Typography>
        <Box sx={{color: 'text.secondary'}}>333333333333</Box>
      </Box>
    </ThemeProvider>
  );
}

export default App;
material-ui reactjs
1 Answers

Typography component doesn't directly support theming and color schemes you have to do it manually in your palette, or you can simply use Box component or rather don't give color inside sx property

or you can do something like that

  <Typography color='GrayText'>
          22222222222222222
  </Typography>

This is the result

for more deep information refer to this answer about why Typography doesn't change color on theme change

(Material-ui does not change Typography color according to theme)

user_74406520
Related