Как перезаписать теги с помощью useStyles () в React с MUI

Question

Я пытаюсь перезаписать тег Link React-Router с помощью makeStyles (), чтобы удалить оформление ссылки. Я использую makeStyles неправильно? Подчеркивание текста по умолчанию все еще отображается.

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
  },
  Link: {
    textDecoration: "none",
  },
}));

Answer 1

Функция makeStyles не будет переопределять любые определения стиля, связанные с Mui. Использование makeStyles позволяет вам легко создавать новые классы и затем использовать их.

Например:

const useStyles = makeStyles(theme => ({
    myLayout: {
        width: "auto",
        background: "red"
    }
}));
const classes = useStyles();
...
<div className={classes.myLayout}>

Если вы хотите переопределить полное определение компонента Mui, вам нужно будет знать, какой это компонент, каково его внутреннее имя Mui, и тогда вы можете использовать createMuiTheme для этого:

const muiTheme = createMuiTheme({
    overrides: {
        MuiLink: {
            root: {
                textDecoration: "none"
            }
        },
    }
});
...
<MuiThemeProvider theme={muiTheme}>
    <Link />
</MuiThemeProvider>

Если вы хотите изменить только одну указанную c ссылку ( и не переопределять определения стиля всех ссылок на вашем веб-сайте) вы можете использовать makeStyles, а затем использовать специфицированный c класс в <Link /> компоненте:

const useStyles = makeStyles(theme => ({
    noDecoration: {
        textDecoration: "none"
   }
}));
const classes = useStyles();
...
<Link className={classes.noDecoration}>

Примечание. Если вы используете компонент <Link /> из response-router-dom - это не компонент MUI, поэтому он не будет иметь имен классов, связанных с MUI. Вы можете проверить пример здесь о том, как спроектировать соединение маршрутизатора на основе компонентов MUI.