Typography is not effected with primary colors-CodePudding

I am trying to prepare global or app level theming. In theme.js, I have given 'primary' color, which I expect to work on <Typography> as well.

// Demo.js

import * as React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { purple } from "@mui/material/colors";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

const theme = createTheme({
    typography: {
     color: purple[500]
   },
  palette: {
    primary: {
      main: purple[500]
    },
    secondary: {
      main: "#11cb5f"
    }
  }
});

export default function Palette() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Primary</Button> // primary color is applied ie purple color is applied, though 'color' property is not written.
      <Button color="secondary">Secondary</Button> // secondary is applied
      <Typography>some text</Typography> // 'primary' color not applied
    </ThemeProvider>
  );
}

Both <button> get theme colors, and first <Button> gets primary color applied, though property "color" is not given. But <Typography> remains unaffected ie 'primary' color is not applied.

I need like this

<Typography>some text</Typography>

How to apply 'primary' color, without writing 'color' property?

also,

 typography: {
    color: purple[500]
  },

is also, not effecting the text color inside 'typography'.

sandbox link

CodePudding user response：

It's easy enough to achieve it by setting it in your theme in the text like below (see the comment). In this way you can omit the color="primary" in your <Typography> component as primary is the default one. But also you can set and use the other variations and use them like <Typography color="secondary">Test text</Typography>. Hope the below example is easy to understand.

export const theme = createTheme({
  palette: {
    primary: {
      main: '#2d9cdb',
      dark: '#2e85d4', 
    },
    secondary: {
      main: '#2e85d4',
    },
    text: {
      primary: '#000000', // Here is where you set your color.
      secondary: '#2d9cdb',
    },
    success: {
      main: '#55ab68',
      light: '#48C830',
    },
    warning: {
      main: '#f38713',
    },
    error: {
      main: '#ed4a3a',
    },
    divider: '#707070',
  },
...
}

CodePudding user response：

Default value for color in Button component is 'primary' as per the MUI Documentation. And you would want to override color for typography by applying external styles or by doing something as shown below.

const theme = createTheme({
  palette: {
    primary: {
      // Purple and green play nicely together.
      main: purple[500]
    },
    secondary: {
      // This is green.A700 as hex.
      main: "#11cb5f"
    }
  },
 // Override root typography color.
  components: {
    MuiTypography: {
      styleOverrides: {
        root: {
          color: purple[500]
        }
      }
    }
  }
});

CodePudding user response：

const theme = createTheme({
  components: {
    MuiTypography: {
      defaultProps: {
        color: 'primary'
      }
    }
  }
})

the key is defaultProps.

This is how you override default props of MUI components.