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

Question

Hi I have the following React component that positions its children with styles.

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);

I have created a child component "AudioZone" render() return ( ); } which i substitute into the parent

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

However I have run into trouble on how I pass down the "bathButt" style so that the position of the button is set in the parent but read and rendered by the child.

Any help appreciated

Answer 1

For withStyles you can use Higher-Order Components (HOC) to pass styles from parent to child

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);
};

and use it in your child component

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

but insted of withStyles you can use makeStyles ,i think its easer

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


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

child component

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

Working Codesandbox for withStyles and makeStyles