Question

我正在实现自定义颜色主题模块。只需用户选择两种不同的颜色（主要和次要颜色为任何十六进制值）并将值保存在状态中。我使用这些颜色为我的应用程序中的组件设置自定义动态样式，例如：

<Link style={{backgroundColor: this.props.myprofile.primaryColor}} to={href} />

除了2个问题外，这个工作正常。

永远需要为每个组件添加逻辑。我宁愿能够设置className并使用className调用每个元素的逻辑。
Psuedo Classes。诸如:hover和:focus之类的Psuedo类与内联样式不能很好地融合。我知道并使用过镭，但我更愿意找到不同的解决方案。

Answer 1

React对CSS类没有任何特殊控制，它与vanilla javascript相同。因此，您无法出于同样的原因操纵伪元素。

1）您可以使用React的状态在render方法中有条件地设置类名。在这个例子中，我使用了一个名为classnames的模块，但你可以随意处理这个逻辑。

＆＃13;

render() {
	const isActive = this.state.isActive
	const styles = classNames({
		button: true,
		'is-active': isActive
	})

	return (
		<div className={styles}></div>
		
	)

}
/* evaluates to

<div className="button is-active"></div>

*/

＆＃13;

2）对于带有伪类的javascript，没有真正的解决方案。您可以做的最好的事情是添加已经在CSS文件中定义的具有伪选择器的类。

Answer 2

所以看起来我个人觉得最好的解决方案仍然是使用我的风格方法，但我也被迫使用Radium。

我想要做的动态使得使用内联样式是必要的，因为CSS样式表不能动态设置状态，除非十六进制图表上的每个案例都有一个类（这就是我想要的我的用户的选项。）

注意：在查看此内容时，了解此决定的主要原因非常重要，因为我想要的用户选项是十六进制颜色图表可以产生的每个值。

这是一种可怕的方法，需要应用包含逻辑的样式属性，但为了该功能必须对每个组件进行。这比为每个十六进制值编写一个类。

要解决Psuedo类的问题，我使用Radium来使用:hover和:focus。不是我原来的问题所需要的解决方案，而是我现在最好的解决方案。

所以使用Psuedo Classes的代码看起来像这样......

import Radium from 'radium'

<div key={i} style={{backgroundColor: primaryColor, ':hover': {backgroundColor: 'yellow'}}} />

const radMyComponent = Radium(MyComponent)

export default connect(mapStateToProps, mapDispatchToProps)(radMyComponent)

如果有人有更好的解决方案。请发帖。我很乐意看到。

基于React中使用State Values的动态CSS样式表

2 个答案: