Использование createMuiTheme для переопределения стилей по умолчанию для элементов div, p, body - PullRequest
Новая
       20

Использование createMuiTheme для переопределения стилей по умолчанию для элементов div, p, body

1 голос
/ 04 июня 2019

Возможно, это простой вопрос настройки темы пользовательского интерфейса.

Я хочу переопределить стиль по умолчанию для <body> (и других распространенных тегов в будущем).Прямо сейчас в корне моего дерева React: 

import theme from './mui-theme'


ReactDOM.render(
  <Router>
    <ThemeProvider theme={theme}>
      <StylesProvider injectFirst>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <App />
      </StylesProvider>
    </ThemeProvider>
  </Router>,
  document.getElementById('root'),
);

Есть тема, которая определяет некоторые вещи, но не учитывает 'body1'

const theme = useTheme(), а console.log(theme) показывает, что она определенакак: 

typography:
  body1:
    fontFamily: "Roboto,"Helvetica Neue""
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.5

Это настройка, которую я хочу.Однако, чтобы использовать эту настройку, я должен использовать тег Typography с variant='body1'.В противном случае текст внутри div имеет стиль, предоставляемый CssBaseline.Это правило для тега body: font-size: .875rem;, которое я хочу переопределить.

Переопределяют ли люди стили, предоставляемые CssBaseline, с помощью createMuiTheme?Если так, я добавил: 

body: {
    fontSize: '1rem',
  },

Который отображается на console.log(theme), но как сказать тегу <body>, чтобы фактически использовать этот стиль?

1 Ответ

1 голос
/ 04 июня 2019

Вот пример переопределения этого аспекта CssBaseline: 

import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  "@global": {
    body: {
      ...theme.typography.body1
    }
  }
});

function MyCssBaseline() {
  return null;
}

MyCssBaseline.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(MyCssBaseline);


import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import MyCssBaseline from "./MyCssBaseline";

function App() {
  return (
    <>
      <CssBaseline />
      <MyCssBaseline />
      <span>
        Here is some text in the body that is getting the body1 styling due to
        MyCssBaseline.
      </span>
    </>
  );
}
ReactDOM.render(<App />, document.querySelector("#root"));

Edit CssBaseline overrides

Ссылка: https://material -ui.com / styles / advanced / # global-css

...