Блог

Я только начал использовать Material UI и научился настраивать тему по умолчанию. Я попытался изменить цвет палитры по умолчанию, и это сработало, но переопределение свойства typography не сработало.

Я пытаюсь изменить свойство FontWeight варианта h3. Вес шрифта по умолчанию для варианта h3 равен 400. Я меняю его на 100 или 300, но это не отражает.

Вот мой код

Component.js

 return (

         <Typography variant="h3" color="secondary">
               Arc Development
         </Typography>
    )
  

theme.js

 import {createMuiTheme} from "@material-ui/core";

const arcBlue = "#0B72B9";
const arcOrange = "#FFBA60";

export default createMuiTheme({
    palette: {
        common: {
            blue: `${arcBlue}`,
            orange: `${arcOrange}`,
        },
        primary: {
            main: `${arcBlue}`
        },
        secondary: {
            main: `${arcOrange}`
        }
    },
    typography: {
        h3: {
            fontS: 0,
        }
    }
});
  

Чао, для переопределения Typography вы должны определить в своей теме объект с именем overrides , а затем внутри этого объекта вы должны определить другой объект с именем MuiTypography и переопределить h3 вариант следующим образом:

 export default createMuiTheme({
    palette: {
        common: {
            blue: `${arcBlue}`,
            orange: `${arcOrange}`,
        },
        primary: {
            main: `${arcBlue}`
        },
        secondary: {
            main: `${arcOrange}`
        }
    },
    overrides: {
       MuiTypography: {
          h3: {
           fontWeight: 100
       }
    }
  }
});
  

И если вы проверите элемент, вы увидите:

Вот пример codesandbox.