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

Question

I am using material-ui which in turn uses JSS to style a website. 我正在使用material-ui ，后者又使用JSS来设计网站样式。

I have a component called Layout that sets margin of all its children (using all children selector & > * in its style). 我有一个名为Layout的组件，用于设置其所有子项的边距（使用其样式中的所有子项选择器& > * ）。 That works but I also want the children to be able to override that margin in their own styles named in className property. 那行得通，但我也希望孩子们能够以在className属性中命名的自己的样式覆盖该边距。

This issue is caused by the fact that material-ui's withStyle function places the parent's style after children's styles inside html <head> . 此问题是由于material-ui的withStyle函数在html <head>内将父代样式放在子代样式之后。 I could increase all chidren's style priority by doing something like withStyles(classes, { index: 1 })(ChildComponent) but that would be tedious and error prone. 我可以通过执行withStyles(classes, { index: 1 })(ChildComponent)来增加所有孩子的样式优先级，但这会很乏味并且容易出错。

What can I do to allow overriding parent defined style by children? 我该怎么做才能允许孩子覆盖父级定义的样式？

Also see this request . 另请参阅此请求。

Answer 1

This is more of a workaround than a solution... 这不是解决方案，而是更多解决方法...

Its possible to have the child component's styles injected below the parent's if you use props.children in the parent component. 如果在父组件中使用props.children ，则可以将子组件的样式注入到父组件的下方。

See JSS injection order 请参阅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>
  );
}

Caveats 注意事项

Im not 100% sure that this behavior is guaranteed. 我不能100％保证可以保证这种行为。

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

问题描述

1 个解决方案

解决方案1
1 2018-09-21 21:59:56

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

问题描述

1 个解决方案

解决方案1 1 2018-09-21 21:59:56

解决方案1
1 2018-09-21 21:59:56