Поместить стили, сгенерированные material-ui для дочерних компонентов, после стиля, сгенерированного для родительского компонента? - PullRequest
Новая
       10

Поместить стили, сгенерированные material-ui для дочерних компонентов, после стиля, сгенерированного для родительского компонента?

0 голосов
/ 17 сентября 2018

Я использую material-ui , который, в свою очередь, использует JSS для стилизации веб-сайта.

У меня есть компонент с именем Layout, который устанавливает маржу для всехего дочерние элементы (используя селектор всех дочерних элементов & > * в своем стиле).Это работает, но я также хочу, чтобы дети могли переопределять это поле в своих собственных стилях, названных в свойстве className.

Эта проблема вызвана тем, что функция withStyle material-ui помещает стиль родителя после детских стилей в html <head>.Я мог бы повысить приоритет стиля всех детей, выполнив что-то вроде withStyles(classes, { index: 1 })(ChildComponent), но это было бы утомительно и подвержено ошибкам.

Что я могу сделать, чтобы разрешить переопределение родительского стиля, определенного детьми?

Также см. этот запрос .

1 Ответ

0 голосов
/ 22 сентября 2018

Это скорее обходной путь, чем решение ...

Возможно, стили дочернего компонента будут вставлены ниже родительского, если вы используете 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>
  );
}

Edit Stack Overflow: Override styles set in parent component Material UI

Предостережения

Я не уверен на 100%, что такое поведение гарантировано.

...