Question

嗨，我有以下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（）返回（）; } 我替代了父母

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

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

任何帮助表示赞赏

Answer 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的工作代码和框

在react

1 个答案: