Question

我是React的新手，除了2000年初的Javascript以外（我是所有UI的新手），并且我没有找到答案的事实暗示我正在以错误的方式进行操作。因此，我希望有人向我展示光线和/或告诉我如何完成我想做的事情！

简而言之，我有一个组件X，其中有一些其他组件Y的实例。我试图将css添加到将应用于所有Y的父组件中（具体来说，在我的用例中是一个空白。值得注意的是，我想将此样式仅应用于{{1 }}放在Y内，而不是页面上的每个X内。我知道我无法覆盖父级Y中的指定样式，但是我试图添加样式Y上未指定。

更具体地说：

Metrics.js（简称）：

Metrics.css

import './Metrics.css'

class Metrics extends Component {
  render() {
    return (
      <div className="Metrics">
        <div className="titlebar">
          <div>Metrics</div>
          <Button>...</Button>
          <Button>...</Button>
        </div>
      </div>
    );
  }
}

我相信.titlebar { ... } .titlebar Button { padding: 10px; }不能用作选择器，因为它实际上不是生成的html。因此，如果Button是我拥有的组件，并且可以将其修改为具有根Button，那么我相信可以使用

<div className="Button">

但是在这种情况下，我要从{material-ui}导入.titlebar .Button {...}，所以我对此没有控制权。我可以发现渲染会发生什么，但据我所知，这不能通过合同得到保证，因此依赖于该观察会很脆弱。

那么有没有办法通过名称或其他识别React组件的方法将CSS选择器或类似的东西应用于React组件呢？

我正在寻找一个通用的解决方案：我不想为Button解决这个问题，但是对于我可能会以相同方式构建或导入和使用的任何React组件。例如。我已经遇到了同样问题的Button组件，该组件也已导入。即使对于我拥有的组件，我也觉得它引入了不必要的紧密耦合，以取决于根元素上的FontAwesome包含组件名称的约定。有没有更通用，更强大的方法来实现这一目标？

Answer 1

您可以为按钮设置类别，并按类别设置样式

<Button className="button">...</Button>

.titlebar .button {
  padding: 10px;
}

Answer 2

在Button组件中添加一个prop，您可以使用它通过ES6字符串插值有条件地添加类名称。例如：

const Button = ({type}) => {
   return (
     <button className=`button-${type}`>
       I'm a button
     </button>
   )
}

为您的各种类名称使用样式表

.button-red {
  background: red;
}

.button-blue {
  background: blue;
}

.button-margin-left {
  margin-left: 2em;
}

将道具传递到<Button>

<Button type='margin-left' />
<Button type='blue' />
<Button type='red' />

我相信这应该符合您的需求

如何添加另一个父组件中使用的CSS属性React组件？

2 个答案: