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

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

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

关于“How to set custom CSS styles in React?”，你可以快速谷歌一下，会找到大量的答案和文章。喜欢this article ，有(至少)4 种方式在 React 中设置样式:

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