如何使用 reactJs 根据背景颜色更改字体颜色答案

【问题标题】：How to change font color based on background color using reactJs如何使用 reactJs 根据背景颜色更改字体颜色
【发布时间】：2020-12-18 00:22:05
【问题描述】：

我的容器有动态背景，它将由用户更改，因此我需要根据背景颜色设置文本颜色，例如，我设置容器的黑色背景，然后我需要为文本设置白色，我正在为我的应用程序使用 ReactJs 和材料 UI 库，请建议一些好的路径。

【问题讨论】：

您可以使用样式化的组件，这样您就可以传递道具。根据用户选择，将应用颜色。我将添加一个示例代码框 sn-p 你可以检查给我一些时间
javascript 示例在这里.. 但我想要在 reactjs 中相同我在 React jsfiddle.net/2VTnZ/2 中非常新
给我一些时间我正在为一个 div 构建示例
我已经添加了代码和codepen链接，快乐编码:)

标签： reactjs material-ui

【解决方案1】：

请参阅下面的示例代码。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import DynamicContainer from "./style";

import "./styles.css";

function App() {
  const [bgColor, setBGColor] = useState("#422DAD");
  const [textColor, setTextColor] = useState("rgb(99,99,100)");

  function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result
      ? {
          r: parseInt(result[1], 16),
          g: parseInt(result[2], 16),
          b: parseInt(result[3], 16)
        }
      : null;
  }

  useEffect(() => {
    let { r, g, b } = hexToRgb(bgColor);
    let targetColor = `rgb(${r},${g},${b})`;
    var colors = targetColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    var brightness = 1;

    var R = colors[1];
    var G = colors[2];
    var B = colors[3];

    var ir = Math.floor((255 - R) * brightness);
    var ig = Math.floor((255 - G) * brightness);
    var ib = Math.floor((255 - B) * brightness);
    setTextColor(`rgb(${ir}, ${ig}, ${ib})`);
  }, [bgColor]);

  const handleBgChange = e => {
    setBGColor(e.target.value);
  };

  return (
    <>
      <DynamicContainer bgColor={bgColor} textColor={textColor}>
        Hello World!
      </DynamicContainer>
      <p>Choose Background color</p>
      <input type="color" value={bgColor} onChange={handleBgChange} />
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这里是更新的代码框

检查here

【讨论】：

感谢您的快速解决方案.. 但我的要求不同，我想根据背景颜色自动设置字体颜色，就像这个示例.. jsfiddle.net/2VTnZ/2，这是我想要在 ReactJs 中使用的示例
@NitinShinde 我已经更新了代码框，它按照你的 cmets 工作，快乐编码:)
@NitinShinde 酷，快乐编码:)

【解决方案2】：

页面：

<div className="divao">
   <span className="textao">UAU</span>
</div>

css:

.divao{
   background: #000;
}
.textao{
   color: #FFF;
   mix-blend-mode: exclusion;
}

使用此代码，.textao 类的颜色会自动改变。

【讨论】：