Question

我正在使用material-ui，而依次使用JSS来设计网站样式。

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

此问题是由于Material-ui的withStyle函数在html <head>中将父母的样式放在孩子的样式之后而引起的。我可以通过执行withStyles(classes, { index: 1 })(ChildComponent)之类的方法来提高所有孩子的样式优先级，但这会很乏味且容易出错。

我该怎么做才能允许孩子覆盖父级定义的样式？

另请参阅this request。

Answer 1

这不是解决方案，而是解决方法...

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

See JSS injection order

// 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>
  );
}

注意事项

我不是100％确保可以保证此行为。

将material-ui生成的样式放置在子组件的样式之后，再放置父组件的样式？

1 个答案: