为什么这个 CSS <li css={css' border： 1px solid #e1e1e1; padding： 2rem;'} >不适用于我的 React 应用程序？

Question

我需要应用这个：

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

没有导入css模块

Answer 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>