动态 CSS 通过 prop 使用 CSSModules 和 React 组件

IT技术 javascript css reactjs css-modules
2021-05-08 21:53:56

我正在学习如何css modules与react一起使用，下面是一个复选框的工作示例，这里是没有react的情况（纯 HTML + CSS 小提琴）。

import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './checkbox.css'

export function Checkbox (props) {
  return <div styleName="checkbox--container">
    <input styleName="checkbox" type="checkbox" {...props}/>
    <span styleName="checkbox--styled"></span>
  </div>
}

export default CSSModules(Checkbox, styles)

这很好，但假设我的客户回来并希望我更改复选框颜色。好吧，似乎很容易？上面的小提琴显示有几个十六进制代码 (#479ccf) 用于边框和 SVG 背景图像。理想情况下，我可以传递一个reactprops，让你做这样的事情，<Checkbox color="#666333"/>并责备！但是，我找不到任何文档/方法将信息从组件获取到 CSS 文件。

这是什么意思？

我知道 React 社区会说什么，那组特定的 CSS 并不理想。它可以在组件内用 javascript 编写，然后您可以将复选框部分的内联样式设置为props颜色。我很确定这是可能的。这是必要的吗？我不得不重构::after代码，关于那个的问题。

我开始制作 SVG 函数。

function SVGDash (color) {
  return `data:image/svg+xml;charset=US-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2012%2012"%20enable-background%3D"new%200%200%2012%2012"><style%20type%3D"text%2Fcss">circle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23${color}%20%21important%3B%20%7D<%2Fstyle><path%20d%3D"M6%200"%2F><path%20d%3D"M.8%207C.3%207%200%206.7%200%206.2v-.4c0-.5.3-.8.8-.8h10.5c.4%200%20.7.3.7.8v.5c0%20.4-.3.7-.8.7H.8z"%2F><%2Fsvg>`
}

function SVGCheck (color) {
  return `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23${color}%20%21important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M23.6%205L22%203.4c-.5-.4-1.2-.4-1.7%200L8.5%2015l-4.8-4.7c-.5-.4-1.2-.4-1.7%200L.3%2011.9c-.5.4-.5%201.2%200%201.6l7.3%207.1c.5.4%201.2.4%201.7%200l14.3-14c.5-.4.5-1.1%200-1.6z%22%2F%3E%3C%2Fsvg%3E`
}
1个回答

您可以创建一个不同的类来组成要更改颜色的类：

.checkbox--styled-red {
  composes: checkbox--styled;
  background-image: url("data:image .... FF0000 ....");
}

并在获得匹配时将其设置在组件中props.color：

import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './checkbox.css'

function getStyleNameForColor(color) {
  colorToStyleName = {
    red: 'checkbox--styled-red'
  };
  return colorToStyleName[color] || 'checkbox--styled';
}

export function Checkbox (props) {
  return <div styleName="checkbox--container">
    <input styleName="checkbox" type="checkbox" {...props}/>
    <span styleName={getStyleNameForColor(props.color)}></span>
  </div>
}

export default CSSModules(Checkbox, styles)

更好的是，使用类名而不是getStyleNameFor(color).

其它你可能感兴趣的问题
上一篇Material UI 全局 css 变量 下一篇React hooks 函数依赖