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

Question

我想从父组件更改子组件的样式

假设这是子组件

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

这是我要更改 MyButton 颜色的父组件：

父组件.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

所以问题是：如何覆盖子样式？makeStyles 和 classes 属性都不起作用

先感谢您

标签： javascriptreactjsmaterial-ui

Answer 1

您的MyButton组件应该可选地接受一个classNameprop 并将其包含在它Button的className.

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