html - html用动态设置颜色来响应 <hr/>

  显示原文与译文双语对照的内容
57 4

我想在我的收费申请表中有一个。我想在不同的地方改变它的颜色。有什么可以做的?如果我们使用功能组件来实现这个目标,那么该如何做?

时间:原作者:0个回答

78 2

其实没有什么特别的。

const Rule = ({ color }) => (
 <hr
 style={{
 borderColor: color,
 }}
/>
);
const App = () => (
 <div>
 Here's an orange rule. <Rule color="orange"/>
 Here's a blue rule. <Rule color="blue"/>
 </div>
);
ReactDOM.render(<App/>, document.querySelector("main"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main/>
原作者:
93 4

你可以使用 css 来查看代码 below

hr{
 border: red;
}

或者用一个类

.example{
 border: red;
}
原作者:
50 5

你需要使用 below css为它的设置 background 颜色:

 hr {
 background-color: red;//or whatever color you want.
 }
原作者:
63 4

根据我的经验,如果将 <hr> 元素保留在某个颜色之外,则最好通过CSS规则进行样式化,如下例所示:

.foo { border-color: black; }
<hr class="foo"/>

至于反应,你可以从他们的基本CSS道具开始,然后从那里展开。

render() {
 let className = 'hr-color';
 if (this.props.isActive) {
 className += ' foo';
 }
 return <hr className={className}/>
}
原作者:
...