在反应中将样式从父级传递给mui组件答案

【问题标题】：Passing styles from parent to mui component in react在反应中将样式从父级传递给mui组件
【发布时间】：2019-12-26 23:14:35
【问题描述】：

您好，我有以下 React 组件，它使用样式定位其子级。

const styles = () => ({  
    bathButt : {
        top :278,
        left : 336
    },        
})
class AudioZones extends Component {

    render() {
        const { classes } = this.props;
        return ( 
                <IconButton  className={classes.bathButt} >
                    <Speaker/> 
                </IconButton>
                );
             } 
        }
export default withStyles(styles) (AudioZones);

我创建了一个子组件“AudioZone” 使成为（）返回（ ); } 我将其替换为父项

render() {
        const { classes } = this.props;
        return ( 
                <AudioZone/>                    );
             }

但是，我在如何传递“bathButt”样式以使按钮的位置设置在父级中但由子级读取和呈现时遇到了麻烦。

任何帮助表示赞赏

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

对于withStyles，您可以使用高阶组件 (HOC) 将样式从父级传递给子级

const styles = () => ({
  bathButt: {
    top: 20,
    left: 30,
    backgroundColor: "blue"
  }
});


const withMyStyles = WrappedComponent => {
  const WithStyles = ({ classes }) => {
    return (
      <div>
        <WrappedComponent classes={classes} />
      </div>
    );
  };

  return withStyles(styles)(WithStyles);
};

并在您的子组件中使用它

class AudioZones extends Component {
  render() {
    const { classes } = this.props;
    return (
      <IconButton className={classes.bathButt}>
        <h1>Speaker Component</h1>
      </IconButton>
    );
  }
}
export default withMyStyles(AudioZones);

但是安装了withStyles，你可以使用makeStyles，我认为它更容易

const useStyles = makeStyles({
  bathButt: { top: 20, left: 50, color: "red" } // a style rule
});


function App(props) {
  return <AudioZones useStyles={useStyles} />;
}

子组件

function AudioZones(props) {
  const classes = useStyles();
  return (
    <div>
      <IconButton className={classes.bathButt}>
        <h1>Speaker Component</h1>
      </IconButton>
    </div>
  );
}

withStyles 和 makeStyles 的工作代码沙盒

【讨论】：