Question

我需要使用*, *:after, *:before设置material ui样式，我还需要更改网络应用的全局字体系列。我如何实现这一目标？

Material-UI版本： 1.0.0-beta.5

React版本： 15.4.1

Answer 1

在最长的时间内，这是Material-UI中的那些隐藏选项之一，但是现在设置DOM中任何元素样式的最简单方法是使用jss-plugin-global提供的@global类：

const GlobalCss = withStyles({
    "@global": {
      "html, body": {
        margin: 0,
        padding: 0
      },
      ".App": {
        backgroundColor: "blue",
        fontFamily: "sans-serif",
        textAlign: "center"
      }
    }
  })(() => null);

这里以CodeSandbox project为例，使用这种方法替换了普通的CSS文件。

docs

中引用了此功能

Answer 2

将您的全局CSS规则写在单独的文件中。
在您的项目中，找出名为index.html或其他名称的条目html文件。
将h css link链接添加到该html文件中step1的文件中，就像普通的html文件一样。

Answer 3

fontFamily是主题的属性。您需要使用“ MuiThemeProvider”包装器传递这些属性。

const theme = createMuiTheme({  
  palette : {
    primary: {  
      light:  '#fff8e1',
      main: '#fff8e1',
      dark:  '#fff8e1',
    },
  }, 
  typography: {
    useNextVariants: true,
    fontFamily : 'Poppins',
    fontSize : 12,
  },
});


<MuiThemeProvider theme={theme}>
  <CssBaseline />
  <React.Fragment>
    <Typography variant='h4'>
    </Typography>
  </React.Fragment>
</MuiThemeProvider>

API < MuiThemeProvider>

API Themes

如何使用材质ui设计全局元素的样式？

3 个答案: