reactjs - 如何使用 reactJs 根据背景颜色更改字体颜色
问题描述
我的容器有动态背景,它将由用户更改,因此我需要根据背景颜色设置文本颜色,例如,我设置容器的黑色背景,然后我需要为文本设置白色,我正在使用 ReactJs 和材质 UI 库对于我的应用程序,请提出一些好的路径。
解决方案
请参阅下面的示例代码。
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);
这是更新的代码框
在这里检查
推荐阅读
- angular - Angular ServiceWorker:缓存多个 HTTP 请求
- google-cloud-platform - 缺少 MessageReceiver 类
- powershell - 使用 $host.ui.PromptForCredential 时输入值存储在哪里?
- leaflet - 传单不显示来自 geojson 文件的信息
- botframework - Microsoft 签名密钥没有背书
- python - 使用 selenium 和 python 自动访问下一页
- c# - 如何使用 selenium webdriver C# 获取元素样式属性的值
- c# - Vtiger API 扩展会话返回需要身份验证
- css - 应用特定于屏幕分辨率的 CSS 样式
- python - Pyinstaller 密钥环 Windows 32 位