时间戳

首页 > 解决方案 > 使用 React 在功能组件内使用 flexbox 进行样式设置

javascript - 使用 React 在功能组件内使用 flexbox 进行样式设置

问题描述

作为参考，本文解释了如何设置组件样式：https ://reactjs.org/docs/dom-elements.html#style

当我做一个简单的陈述时：

const cardStyle = {
        display: flex,
        justifyContent: center,
        alignItems: center,
        backgroundColor: `${bgColor}`,
        color: color,
        height: '150px',
        width: '300px'
}

我收到以下错误：

  Line 19:18:  'flex' is not defined    no-undef
  Line 20:25:  'center' is not defined  no-undef
  Line 21:21:  'center' is not defined  no-undef

Search for the keywords to learn more about each error.

我在网上找到了这个答案，但它没有帮助Link

这是我的第一个问题，非常感谢您的回答。谢谢！

标签： javascriptreactjsflexbox

解决方案

在里面写 CSS 代码jsx不像写纯 CSS，例如这里有一些关于 CSS 的要点js/jsx：

  • 每个正确的值都应该在引号内，所以你应该使用“center”或“space-between”或“100%”......但例外是等于 的数字${number}px。
  • 每个左值都应该是驼峰式的，并且没有破折号。
  • 没有分号 (;) 但我们使用逗号 (,)

这就是我现在所记得的

你的问题的答案是它应该是这样的：

const cardStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: bgColor,
    color: color,
    height: '150px',
    width: '300px'
}

所以，我们基本上是Object在 JSX 中使用我们的内联样式。

推荐阅读