CODEWITHSUNDEEP
reactjsmaterial-ui
BigSteve
BigSteve

Reputation: 55

How to overwrite tags with useStyles() in React with MUI

I'm trying to overwrite the Link tag of React-Router with makeStyles() to remove the link decoration. Am I using makeStyles incorrectly? The default text underline is still showing.

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

Upvotes: 2

Views: 672

Answers (1)

Dekel
Dekel

Reputation: 62536

The makeStyles function will not override any Mui-related style definitions. The usage of the makeStyles is to give you an easy way to create new classes and then use them.

For example:

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

If you want to override entire definition of Mui component, you will need to know which component it is, what it's internal Mui name, and then you can use the createMuiTheme for that:

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

If you want to change only one specific link (and not to override the style definitions of all the links in your website) you can use the makeStyles and then use the specific class in the <Link /> component:

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

Note - if you are using the <Link /> component from react-router-dom - this is not a MUI component, so it will not have any MUI related classnames. You can check the example here on how to design the router's link based on the MUI components.

Upvotes: 3

Related Questions