css - 如何访问 react 组件中的样式元素？

Question

在 React 代码方面需要一些帮助。假设一个组件在其中声明了样式，例如

          <style>{
            .list-done {
                color:red;
            }
        `}</style>

那么我如何使用这种样式来设置我的链接标签的样式

<li>item1</li>

我想为此使用类名。但是在这种情况下如何使用它呢？我被告知要使用类似这样的东西，但在文档中找不到任何东西 --> import cx from 'classnames';

好吧，我现在在这里声明了一个变量

const styleItem={color:'red'}

如何有条件地使用它？

我是这样做的

style={item.done?styleItem:''}

它不起作用。

我在这里做错了什么？

Answer 1

你需要添加一个className到你的list Item，通过react你可以使用className属性来添加它

<li className={'list-done'}>item1</li>

您可能需要在组件中加载样式。你需要为它配置 style-loader 和 webpack。

在 how to configure styles with webpack 上查看此答案

或者写内联样式

render() {
   const listStyles = {
       color:red;
   }
   return (
      <li styles={item.done? listStyles: {}}>item1</li>
   )
}