CODEWITHSUNDEEP
reactjsmaterial-ui
bukso
bukso

Reputation: 1376

How to customize text colors in the material ui in v 1.0.0

Hello I try to customize the primary text-colors of the material ui,

I did this to customize the primary color:

const blue = {
  50: '#3ea5d7',
  100: '#3ea5d7',
  200: '#3ea5d7',
  300: '#3ea5d7',
  400: '#3ea5d7',
  500: '#3ea5d7',
  600: '#3ea5d7',
  700: '#3ea5d7',
  800: '#3ea5d7',
  900: '#3ea5d7',
  A100: '#3ea5d7',
  A200: '#3ea5d7',
  A400: '#3ea5d7',
  A700: '#3ea5d7',
  contrastDefaultColor: 'light',
};

const muiTheme = createMuiTheme({
  palette: {
    primary: blue,
  },

but I didnt get it how to customize the Text color. How to do this?

Upvotes: 1

Views: 2605

Answers (1)

bukso
bukso

Reputation: 1376

I finally found out how it works:

To override classes you need to write exactly the override name of the component, for example button is MuiButton. The override works in the same order like the class names, f.e. if I have .MuiButton-label-1607 as class ther should be 

overrides: {
  MuiButton: {
    label: {
      color: 'white', .....

to override the color of the label, so I have finally:

const blue = {
  50: '#3ea5d7',
  100: '#3ea5d7',
  200: '#3ea5d7',
  300: '#3ea5d7',
  400: '#3ea5d7',
  500: '#3ea5d7',
  600: '#3ea5d7',
  700: '#3ea5d7',
  800: '#3ea5d7',
  900: '#3ea5d7',
  A100: '#3ea5d7',
  A200: '#3ea5d7',
  A400: '#3ea5d7',
  A700: '#3ea5d7',
  contrastDefaultColor: 'light',
};

const yellow = {
  50: '#3ea5d7',
  100: '#3ea5d7',
  200: '#3ea5d7',
  300: '#3ea5d7',
  400: '#3ea5d7',
  500: '#3ea5d7',
  600: '#3ea5d7',
  700: '#3ea5d7',
  800: '#3ea5d7',
  900: '#3ea5d7',
  A100: '#3ea5d7',
  A200: '#3ea5d7',
  A400: '#3ea5d7',
  A700: '#3ea5d7',
  contrastDefaultColor: 'light',
};

const muiTheme = createMuiTheme({
  palette: createPalette({
    primary: blue,
    secondary: yellow,
    accent: yellow,
  }),
  overrides: {
    MuiButton: {
      raisedPrimary: {
        color: 'white',
      },
      raisedAccent: {
        color: 'white',
      },
    },
    MuiCheckbox: {
      checked: {
        color: '#607d8b',
      },
    },
    MuiAppBar: {
      colorPrimary: {
        color: 'white',
      },
    },
  },
});

Upvotes: 2

Related Questions