Question

我想根据十六进制中的子元素更改背景颜色

示例：

render() {
    return (
        ...
    <span>
        <h3 style={{ color: item.color }}>Item Color</h3>
    </span>
      ...
 }

我尝试了mixBlendMode（mix-blend-mode），但这与我的要求相反，

因此，如果h3颜色为白色，而span backgroundColor为白色，我想将其更改为黑色，反之为黑色，如果color = black则背景为白色

是否有任何官方的CSS方法可以做到这一点？以及是否有其他选择（使用JS从十六进制中检测颜色）

if color=white then bgColor=black

if color=black then bgColor=white

（其他颜色也是如此）

Answer 1

可能有一种更简单的方法，但这是我想出的一个解决方案：

首先将ref标签添加到您要观看的元素：

<h3 ref={"tag"} style={{ color: item.color }}>Item Color</h3

不使用生命周期方法来跟踪颜色并将其设置为React中的状态：

componentDidMount() {
    let taggedColor = window.getComputedStyle(this.refs.tag);
    this.setState({
      taggedColor: taggedColor.color
    });
  }

  componentDidUpdate() {
    let taggedColor = window.getComputedStyle(this.refs.tag);
    if (taggedColor.color !== this.state.taggedColor) {
      this.setState({
        taggedColor: taggedColor.color
      });
    }
  }

getComputedStyle将十六进制转换为RGB，因此现在您可以使用基于RGB的条件：

<span
        style={
          this.state.taggedColor === "rgb(17, 17, 17)"
            ? { backgroundColor: "#fff" }
            : { backgroundColor: "#111" }
        }
        className="App"
      >
         <h3 ref={"tag"} style={{ color: item.color }}>Item Color</h3
      </span>

再次，我敢肯定有一种更简单的方法，但这就是我想出的。

CSS-根据子颜色更改BackgroundColor

1 个答案: