通过道具使用带有React组件的CSSModules动态CSS
Dynamic CSS via prop using CSSModules with React component
我正在学习如何将css modules
与react一起使用,下面是一个复选框的工作示例,这是它在没有react的情况下的样子(纯HTML+CSS fiddle)。
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)
这很好,但假设我的客户回来了,希望我更改复选框的颜色。很好,似乎很容易?上面的fiddle显示了边界和SVG背景图像中有几个十六进制代码(#479ccf)。理想情况下,我可以传递一个反应道具,让你做一些类似<Checkbox color="#666333"/>
和blam的事情!然而,我找不到任何文档/方法来将信息从组件获取到CSS文件。
这是什么意思?
我知道react社区会说什么,那套特定的CSS并不理想。它可以在组件中用javascript编写,从那里你可以将复选框的内联样式设置为道具颜色。我确信这是可能的。这有必要吗?我必须重构::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`
}
您可以创建一个不同的类来组成要更改颜色的类:
.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)
。
相关文章:
- React重新渲染但未显示正确的组件
- React组件等待所需道具进行渲染
- 如何在react js中将值从一个组件发送到另一个组件
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- React组件-设置页面标题
- 为react组件传递道具的最佳方式
- react组件中的绑定方法
- 如何在react js中移动第二个组件
- 如何在react路由器的组件中使用参数
- React+Redux性能优化与组件ShouldUpdate
- React-将jSON数据传递给子组件的子组件
- React js更改状态不会更新组件
- 加载服务器端渲染的React组件后执行脚本
- React ClickDrag子组件回调
- 如何在渲染函数中检查 react 中子组件的状态
- 以最封装的方式封装/封装ScalaJS react js组件(react stick)
- bind():您正在将一个组件方法绑定到该组件.React会自动为您执行此操作
- 如何将值从父组件传递到子组件(react)
- 将函数从HOC传递到组件(React, React native)
- 根据屏幕大小以不同的顺序呈现组件(React)