使用 material-ui 更改父组件中的子组件样式

Question

I want to change the style of the child-component from the parent component

Let's say this is the child component

MyButton.js

import ButtonComponent from '@material-ui/core/Button'

const useStyles = makeStyle((theme) => {
  return {
    root: {
      color: '#724e35',
    }
  },
  });

  const MyButton = () => {
    const classes = useStyles()
    return <ButtonComponent className={classes.root}>Button</ButtonComponent>
  }

export default MyButton

And this is my parent component where I want to change the color of MyButton:

ParentComponent.js

import MyButton from './MyButton'

const useStyles = makeStyle((theme) => {
  return {
    root: {
      color: '#e1daf9',
    }
  },
  });

  const ParentComponent = () => {
    const classes = useStyles()
    return <MyButton className={classes.root}>Button</MyButton>
  }

export default ParentComponent

So the question is: How can I override child style? Neither makeStyles nor classes property work

Thank you in advance

Answer 1

Your MyButton component should accept a className prop optionally and include that on its Button 's className .

const MyButton = ({ className = "" }) => {
  const classes = useStyles();
  return <Button className={`${classes.root} ${className}`}>Button</Button>;
};

Answer 2

Pass the overriding class like this

MyButton.js

import ButtonComponent from '@material-ui/core/Button'
const useStyles = makeStyle((theme) => {
      return {
        root: {
          color: '#724e35',
        }
      },
      });
    
      const MyButton = ({myButtonStyleOverrideClass = ''}) => {
        const classes = useStyles()
        return <ButtonComponent className={`${classes.root} ${myButtonStyleOverrideClass}`}>Button</ButtonComponent>
      }

export default MyButton

ParentComponent.js

import MyButton from './MyButton'

const useStyles = makeStyle((theme) => {
  return {
    root: {
      color: '#e1daf9',
    }
  },
  });

  const ParentComponent = () => {
    const classes = useStyles()
    return <MyButton myButtonStyleOverrideClass={classes.root}>Button</MyButton>
  }

export default ParentComponent