我可以选择一种类型的所有 React 组件，而不为每个组件分配一个类吗？

我这里有一个游乐场：https://codesandbox.io/s/736v9vjzw1 https://codesandbox.io/s/736v9vjzw1

const Something = ({ classes, children, variant }) => {
  return (
    <div className={classes.someThing}>
      <p> I'm some thing </p>

      <SomeOtherThing />

      <SomeOtherThing> I have some children </SomeOtherThing>

      <SomeOtherThing> I have some children </SomeOtherThing>

      <SomeOtherThing> I have some children </SomeOtherThing>
    </div>
  );
};

const styles = {
  someThing: {
    color: "green",
    border: "solid 2px black",
    margin: 30,

    "& $someOtherThing": {
      backgroundColor: "pink" // Doesn't work
    },

    "& p": {
      fontWeight: "bold" //This works but is too broad
    }
  }
};

我这里有一个情况，我想设计所有的样式SomeOtherThing在我的里面SomeThing.

我可以用& p选择器来选择p元素 - 但我不喜欢这个。它会随机设计任何样式p我有 - 而且我不想查看组件定义内部来查找它的顶级元素是什么。

我怎样才能做到这一点？就像是& SomeOtherElement.

它在现实世界中的应用是，在某些地方我想要有SomeOtherElement被显示block和其他地方inline-block.

我会延长SomeOtherThing组件接受一个类名并将其添加到div如果存在的话。这也适用于生产设置，其中类名称被缩小为例如.t-0-root.

这是一个分叉的游乐场：https://codesandbox.io/s/zlzx277zzm https://codesandbox.io/s/zlzx277zzm其中显示了如何使用它。

const SomeOtherThing = ({ classes, children, className }) => {
  return (
    <p className={`${classes.someOtherThing} ${className && className}`}>
      I'm another thing {children}
    </p>
  );
};

我很可能会使用这个包classnames有条件地呈现类名而不是字符串插值。

const Something = ({ classes, children, variant }) => {
  return (
    <div className={classes.someThing}>
      <p> I'm some thing </p>

      <SomeOtherThing />

      <SomeOtherThing className={classes.someOtherThing}>
        I have some children
      </SomeOtherThing>

      <SomeOtherThing className={classes.someOtherThing}>
        I have some children
      </SomeOtherThing>

      <SomeOtherThing className={classes.someOtherThing}>
        I have some children
      </SomeOtherThing>
    </div>
  );
};

const styles = {
  someThing: {
    color: "green",
    border: "solid 2px black",
    margin: 30
  },
  someOtherThing: {
    backgroundColor: "pink"
  }
};