时间戳

首页 > 解决方案 > CSS - 根据子颜色更改背景颜色

css - CSS - 根据子颜色更改背景颜色

问题描述

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

例子：

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

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

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

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

if color=white then bgColor=black

if color=black then bgColor=white

（其他颜色也是如此）

标签： cssreactjs

解决方案

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

首先在要观看的元素上添加一个 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>

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

推荐阅读