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

Question

我是 React 的新手，除了 2000 年初的 Javascript(该死的我是所有这些 UI 的新手)之外的任何东西，我没有找到答案的事实意味着我正在以错误的方式接近这个问题。所以我很感激有人向我展示光和/或告诉我如何完成我正在尝试做的事情!

简而言之，我有一个组件 X有几个另一个组件的实例 Y .我正在尝试将 css 添加到将应用于所有 Y 的父组件s(具体来说，我的用例中的边距。值得注意的是，我只想将此样式应用于我的 Y 中的 X 的这些实例，而不是页面上的每个 Y。我知道我不能从父级覆盖 Y 中的指定样式，但我试图添加未在 Y 上指定的样式。

更具体地说:

Metrics.js(缩写):

import './Metrics.css'

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

指标.css

.titlebar {
  ...
}

.titlebar Button {
  padding: 10px;
}

我相信Button不能用作选择器，因为那不是实际生成的 html。所以如果Button是我拥有的组件，我可以修改它以获得根 <div className="Button">那么我相信可以使用

.titlebar .Button {...}

但在这种情况下，我正在导入 Button (来自 material-ui)，所以我无法控制它。我可以找出它会渲染什么，但据我所知，契约(Contract)并不能保证这一点，因此依赖这种观察是很脆弱的。

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

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

Answer 1

可以为按钮设置类，按类设置样式

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

.titlebar .button {
  padding: 10px;
}