Javascript 使用材质ui更改父级中的子组件样式

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

假设这是子组件

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

import ButtonComponent from'@material ui/core/Button'
const useStyles=makeStyle（（主题）=>{
返回{
根目录：{
颜色：“#724e35”，
}
},
});
常量MyButton=（）=>{
常量类=useStyles（）
返回按钮
}
导出默认MyButton

这是我的父组件，我想在其中更改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

import MyButton from./MyButton'
const useStyles=makeStyle（（主题）=>{
返回{
根目录：{
颜色：“#e1daf9”，
}
},
});
常量ParentComponent=（）=>{
常量类=useStyles（）
返回按钮
}
导出默认父组件

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

---

提前谢谢

您的

MyButton

组件应该可以选择接受

className

道具，并将其包含在

按钮的
className
中

constmybutton=（{className=”“}）=>{
const classes=useStyles（）；
返回按钮；
};

谢谢。我仍然需要在MyButton.js中编写样式，这是我试图避免的。有办法吗？我不知道你的意思，你想重写
MyButton.js
style，但你不想写一个样式？我想这是一个不同的问题？那么让我们假设，
MyButton
是一个可重用的组件，具有我需要的所有样式（如边距、填充、排版等），通常它的颜色为#724e35。但是在
ParentComponent
内部，我希望
MyButton
具有另一种颜色，比如说#e1daf9。我可以不编辑
MyButton.js
就完成它吗？我想不行。我正在考虑给
MyButton
提供一个已知的
className
，这样我们就可以使用css文件覆盖它-但这仍然会改变
MyButton
。