如何使用ReactJs根据背景颜色更改字体颜色

Question

我有一个容器的动态背景，它会被用户更改，因此我需要根据背景颜色设置文本颜色。例如，如果我设置了容器的黑色背景，那么我需要将文本颜色设置为白色。

我正在使用ReactJs和Material UI库开发我的应用程序，请给出一些好的建议。

- Nitin Shinde

---

你可以使用Styled Components，这样你就可以传递props。根据用户的选择，颜色将被应用。我会添加一个示例CodeSandbox片段，你可以检查一下，请给我一些时间。 - Learner

这是一个 JavaScript 的例子...但我想在 ReactJS 中实现相同的功能。我对 React 还非常陌生。http://jsfiddle.net/2VTnZ/2/ - Nitin Shinde

给我一些时间，我正在为一个 div 构建样例。 - Learner

我已经添加了代码和CodePen链接，愉快编程 :) - Learner

Answer 1

页面：

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

CSS：

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

使用这段代码，.textao类的颜色会自动更改。

- Humberto

Answer 2

请见下方示例代码。

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);

这是更新后的 CodeSandbox。

请在这里检查。

- Learner

---

谢谢您的快速解决方案。但我的要求不同，我想根据背景颜色自动设置字体颜色，就像这个示例一样：http://jsfiddle.net/2VTnZ/2/，这是一个示例，我希望在ReactJs中实现它。 - Nitin Shinde

@NitinShinde，我已经更新了CodeSandbox并按照您的评论进行了修改，祝您编程愉快 :) - Learner

@NitinShinde 很酷，编码愉快 :) - Learner