Material-UI React: глобальное переопределение темы для компонента Paper - PullRequest
Новая
       4

Material-UI React: глобальное переопределение темы для компонента Paper

0 голосов
/ 23 декабря 2018

У меня есть приложение React, созданное с использованием новейшей библиотеки компонентов Material-UI.

Я использую множество экземпляров компонента Paper.Я хочу применить поля и отступы ко всем им одновременно, не повторяя вручную этот процесс для каждого экземпляра.

Я просмотрел документацию Material-UI по теме, и из того, что яМожно сказать, следующий код должен правильно переопределить, как выглядит бумага: 

const theme = createMuiTheme({
    overrides: {
        Paper: {
            root: {
                padding: '10px',
                marginBottom: '10px',
            },
        },
    },
});

Ниже указано, где применяется переопределенный стиль должен : 

<ThemeProvider theme={theme}>
    {/* ... */}
    <Paper>
        Content goes here
    </Paper>
    {/* ... */}
</ThemeProvider>

Но переопределенные значения не применяются.Любые предложения относительно того, что происходит?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 23 декабря 2018

Я обнаружил проблему.

Внутреннее имя компонента, используемое для CSS, это MuiPaper, а не просто Paper.Следующее дает желаемый результат: 

overrides: {
    MuiPaper: {
        root: {
            padding: '10px',
            marginBottom: '10px',
        },
    },
},
0 голосов
/ 23 декабря 2018

в вашем App.js добавьте (обратите внимание MuiPaper, а не Paper): 

const theme = createMuiTheme({
  overrides: {
    MuiPaper: {
      root: {
        padding: '10px',
        marginBottom: '10px'
      },
    },
  }
});

в том же файле App.js, оберните ваш HTML: 

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <div className="App">
          <YourComponent1 />      
          <YourComponent2 />
          ...
        </div>
      </MuiThemeProvider>
    );
  }
}

таким образом, любой Paper компонент, отображаемый React, будет иметь ваш CSS.

Кстати, я создал MUI schematics модуль, который добавляет поддержку Material UI, автоматически генерирует несколько компонентов Material UI идобавляет общие правила темы в App.js.Вы можете посмотреть / попробовать ...

...