將material-ui生成的樣式放置在子組件的樣式之后，再放置父組件的樣式？

Question

我正在使用material-ui ，后者又使用JSS來設計網站樣式。

我有一個名為Layout的組件，用於設置其所有子項的邊距（使用其樣式中的所有子項選擇器& > * ）。 那行得通，但我也希望孩子們能夠以在className屬性中命名的自己的樣式覆蓋該邊距。

此問題是由於material-ui的withStyle函數在html <head>內將父代樣式放在子代樣式之后。 我可以通過執行withStyles(classes, { index: 1 })(ChildComponent)來增加所有孩子的樣式優先級，但這會很乏味並且容易出錯。

我該怎么做才能允許孩子覆蓋父級定義的樣式？

另請參閱此請求。

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

注意事項

我不能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