为什么这个 CSS <li css={css` 边框：1px solid #e1e1e1; padding: 2rem;`} > 不在我的 React 应用中应用？答案

【问题标题】：Why this CSS <li css={css` border: 1px solid #e1e1e1; padding: 2rem;`} > not applying in my React app?为什么这个 CSS <li css={css` 边框：1px solid #e1e1e1; padding: 2rem;`} > 不在我的 React 应用中应用？
【发布时间】：2021-11-11 02:00:47
【问题描述】：

我需要应用这个：

                    <li key={`${comentario.usuarioId}-${i}`} 
                        css={css`
                            border: 1px solid #e1e1e1;
                            padding: 2rem;
                        `}
                    >

没有导入 css 模块

【问题讨论】：

因为style属性没有被调用css?
style={{ border: 1px solid #e1e1e1; padding: 2rem; }}。我看不出你的代码在其他项目中是如何工作的。
当应用于元素的style 属性时，它可能已经在另一个项目中工作，因为该项目依赖于一个 css-in-js 库（样式化组件、情感等）公开了一个 css 辅助函数作为其 api 的一部分。这与 react 或 react 版本无关。
好吧，我想这就是问题的一半。这些库声称可以提供帮助，但实际上它们只是使事情变得模糊，使代码更难理解。

标签： css reactjs

【解决方案1】：

您可以使用对象的 style 属性来设置元素的内联样式，如下例所示：

class App extends React.Component {
  render() {
    return (<div>
      <ul>
        <li style={{ "border": "1px solid #e1e1e1", "padding": "2rem" }}>some item</li>
      </ul>
    </div>);
  }
}


ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：