首页 文章

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

提问于
浏览 次
0

反应代码需要一些帮助 . 假设一个组件在其中声明了样式

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

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

<li>item1</li>

我想为此使用类名 . 但在这种情况下如何使用它？有人告诉我使用这样的东西，但在文档中找不到任何东西 - >从'classnames'导入cx;

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

const styleItem={color:'red'}

我如何有条件地使用它？

我是这样做的

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

它不起作用 .

我在这做错了什么？

css reactjs

2 回答

  • 2

    您需要在列表Item中添加className，使用className属性可以添加它

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

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

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

    或者写内联样式

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

    你不能在反应中声明这样的样式 . 您需要将其作为变量并在style属性中指定它 .

    let styles = { color:red; }
<li style={styles}> item 1 </li>

    要么

    在外部声明类（可能在某些css中）并使用className属性来分配该类

    <li className='list-done'> item1  </li>
    回复于

相关问题