2

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

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

除了 2 个问题外，这一切正常。

  1. 将逻辑添加到每个组件需要永远。我宁愿能够设置 aclassName并用 that 调用每个元素上的逻辑className。

  2. 伪类。伪类，例如:hoverand:focus不能很好地与内联样式混合。我知道并使用过镭，但我更愿意找到不同的解决方案。

4

2 回答 2

0

所以看起来我个人能找到的最好的解决方案仍然是使用我的风格方法，但我也被迫使用 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)

如果有人有更好的解决方案。请发帖。我愿意去看。

于 2017-05-08T23:13:57.083 回答
0

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

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

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>

*/

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

于 2017-05-08T22:51:00.387 回答