CSS - 根据子颜色更改背景颜色答案

【问题标题】：CSS - Change BackgroundColor Based on child colorCSS - 根据子颜色更改背景颜色
【发布时间】：2019-06-20 16:37:04
【问题描述】：

我想根据 HEX 中的子元素更改背景颜色

示例：

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

我尝试过mixBlendMode (mix-blend-mode) 但这与我的要求相反，

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

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

if color=white then bgColor=black

if color=black then bgColor=white

（其他颜色也是如此）

【问题讨论】：

如果问题只是颜色反转，你可能会发现这个库很有用github.com/onury/invert-color
完美运行
太棒了！感谢您的反馈。如果您不介意 - 请分享您的代码，以便其他有类似问题的人更容易参考
<span><h3 style={{ padding: 10, background: invert("#" + item.code), color: "#" + item.code }}>Color Code: #{item.code}</h3></span>

标签： css reactjs

【解决方案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 将 HEX 转换为 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>

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

【讨论】：