Question

我尝试放置Grid Material-UI组件，但没有成功，这是怎么回事？

class Scene extends React.Component {
  render() {
    const mystyle = {
        backgroundColor: "DodgerBlue",
        position: "absolute",
        top: "125px",
        left: "125px",
        width: "100px",
        height: "100px"
    };

    return (
      <div className={mystyle}>
      <Grid container>
        <Grid item xs="2">
          <Board init={1} end={2}/>
        </Grid>
      </Grid>
      </div>
    );
  }
}
export default Scene;

Answer 1

在您的情况下，看来好像是错误的是mystyle，className={mystyle}不是“ className”，而是实际的“ style”对象。尝试将style={mystyle}替换为div，我相信它将通过使所有样式变为css-in-js中的内联样式而起作用。

关于“如何在React中设置自定义CSS样式？”，您可以快速浏览一下，并找到大量的答案和文章。像this article一样，React中至少有4种方法来设置样式：

使用CSS样式表
内联样式。内联样式也有2种类型：实际内联样式与通过对象进行的内联样式（如您所做的一样）
CSS模块
使用SELECT si.id AS shop_item_id, COALESCE(si.item_price, api.item_price) AS coalesced_price, ...库（如样式组件）来创建“样式组件”
使用库的方法。他们可能会使用React Hooks将javascript对象转换为className（在这种情况下，这可能就是您真正想要的-Material-UI方式）

Answer 2

要么传递它的ass style属性，要么如果您打算使用多个类，则可以使用“ css-in-js”来设置组件more here - material-ui-docs

的样式

import { withStyles } from '@material-ui/core/styles';


const styles {
   mystyle: {
        backgroundColor: "DodgerBlue",
        position: "absolute",
        top: "125px",
        left: "125px",
        width: "100px",
        height: "100px"
    }
}



class Scene extends React.Component {
  render() {

    const { classes } = this.props;

    return (
      <div className={classes.mystyle}>
      <Grid container>
        <Grid item xs="2">
          <Board init={1} end={2}/>
        </Grid>
      </Grid>
      </div>
    );
  }
}


export default withStyles(styles)(Scene);

或带有钩子的同一个背包

// ...
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  mystyle : {
        backgroundColor: "DodgerBlue",
        position: "absolute",
        top: "125px",
        left: "125px",
        width: "100px",
        height: "100px"
    }
});

function Scene () {

    const classes = useStyles();

    return (
      <div className={classes.mystyle}>
      <Grid container>
        <Grid item xs="2">
          <Board init={1} end={2}/>
        </Grid>
      </Grid>
      </div>
    );

}

export default Scene;

如何在React中设置自定义CSS样式？

2 个答案: