Question

我想在我的反应性应用中加入一个<hr />。我想在不同的地方改变它的颜色吗？有什么办法吗？如果我们使用功能组件来实现这一目标，应该怎么做？

Answer 1

真的没有什么特别的。

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/>

Answer 2

您需要为此设置以下CSS：

    hr {
        background-color: red; //or whatever color you want.
        height: 1px;
    }

Answer 3

根据我的经验，<hr>元素的样式最好是使用CSS规则border-color，如以下示例所示：

.foo { border-color: black; }

<hr class="foo" />

对于React，您可以从他们的基本CSS道具开始，然后从那里扩展它。

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

用动态设置的颜色反应<hr />

3 个答案: