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

Question

我尝试定位我的GridMaterial-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

在您的情况下，问题似乎是className={mystyle}，mystyle 不是“类名”，而是一个实际的“样式”对象。尝试将className={mystyle} 替换为style={mystyle}，我相信它会通过使所有这些样式在div 中变为内联样式来工作。

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

1. 使用 Css 样式表
2. 内联样式。还有 2 种内联样式：实际内联样式与通过对象（就像您所做的那样）
3. CSS 模块
4. 使用 css-in-js 库（如 Styled-components）创建“样式化组件”
5. 使用图书馆的方式。他们可能会使用 React Hooks 将 javascript 对象转换为 className（这可能是您在这种情况下真正想要的 - Material-UI 方式）

Answer 2

要么传递 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;