0

我正在使用material-ui，它又使用JSS来设置网站样式。

我有一个名为的组件Layout，它设置其所有子项的边距（使用其样式中的所有子项选择器& > *）。这行得通，但我也希望孩子们能够以他们自己在className属性中命名的样式覆盖该边距。

这个问题是由于 material-ui 的函数在 htmlwithStyle中将父样式放在子样式之后<head>。我可以通过做类似的事情来增加所有孩子的风格优先级，withStyles(classes, { index: 1 })(ChildComponent)但这会很乏味且容易出错。

我能做些什么来允许孩子覆盖父定义的样式？

另请参阅此请求。

4

1 回答 1

1

这更像是一种解决方法而不是解决方案......

如果您在父组件中使用，则可以将子组件的样式注入到父组件的下方props.children。

见 JSS 注入顺序

// If child components are imported after Layout,
// their styles will be injected below Layout's styles.
import Layout from "./Layout";
import ChildOne from "./ItemOne";
import ChildTwo from "./ItemTwo";

function App() {
  return (
    <Layout>
      <ChildOne />
      <ChildTwo />
    </Layout>
  );
}

编辑堆栈溢出：覆盖在父组件材质 UI 中设置的样式

注意事项

我不能 100% 确定这种行为是有保证的。

于 2018-09-21T21:59:56.583 回答