Question

我正在使用react-color作为我的颜色选择器。 console.log('Current color:', this.state.color);以 rgba 值输出颜色。因此，我要实现的是使用颜色选择器值更改组件颜色。我真的很业余，到目前为止，我一直在尝试向div中添加类并使用React Helmet：

export class Intro extends React.Component {
  render() {
    return (
      <Style>
      {
        .intro:hover {
          background-color: red;
        }
      }
      </Style>
    )
  }
}

这在</head>标记内写得很好。并且该类的所有元素都会更改颜色。当我尝试在括号内使用此状态时，它在样式标签内呈现为原始文本color={ this.state.color }。这是我最近的解决方法。我没有运气将内联样式设置为现有组件。

谢谢！

Answer 1

签出this article中的第一个选项。我认为您在混用术语。 export class不是css类，而是javascript ES6类。 CSS进入对象内部，并且可以内联传递给DOM元素。如果要使用:hover选择器，则必须为要应用此元素的元素分配className并导入css文件。这是我下面的示例。

file.css

.intro:hover {
    background-color: red;
}

file.jsx

export class Intro extends React.Component {
  render() {
    return (
      <div className="intro">some contents</div>
    )
  }
}

需要使用颜色选择器将颜色应用于背景的帮助

1 个答案: