Question

此问题的目标是材料-ui 1.0。

当我使用createMuiTheme创建主题时，如何为typography.title设置不同断点的不同样式？在组件级别上，我可以通过以下方式实现此目的：

const styles = theme => ({
  title: {
    fontSize: 34,
  },
  [theme.breakpoints.down('sm')]: {
    title: {
      fontSize: 28,
    }
  },
})

Answer 1

材料 - 确定有很多不同的主题解决方案。当你寻找一个对你有用的东西时，你正在寻找两件事：

创建可应用于组件层次结构的主题。

文档页面＆＃34; Nesting the theme＆＃34;

更改单个样式规则，同时保持其他样式不变。

文档页面＆＃34; Customizing all instances of component type＆＃34; 和＆＃34; Typography API＆＃34;

使其工作的关键是创建第二个主题，可以看到断点，并为其提供一些特殊选项来覆盖排版：

...outerTheme,
overrides: {
  MuiTypography: {
    title: {
      [outerTheme.breakpoints.down("sm")]: {
        fontSize: 28
      },
    }
  }
}

我发现＆＃34;嵌套主题＆＃34;示例代码适合测试它，所以它可能是这样的： codesandbox.io/s/98192p85zy

编辑：替换最终的代码链接，使其更有用的答案，而不仅仅是文档中的示例。

Answer 2

还有另一种与断点方法一起使用 createMuiTheme 的方法。

如果您选中createMuiTheme核心，则会看到它使用了createBreakpoints类。

因此，您可以这样做：

// theme.js

import createBreakpoints from '@material-ui/core/styles/createBreakpoints'
import { createMuiTheme } from '@material-ui/core/styles'

const breakpoints = createBreakpoints({})

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        [breakpoints.up('lg')]: {
          minWidth: '200px',
          backgroundColor: 'yellow',
        },
      },
      wrapper: {
        padding: '0 10px',
        backgroundColor: 'black',
      },
    },
  },
})

export default theme

（测试：@ material-ui / core 4.0.1）

在material-ui中，如何为不同的断点设置不同的主题样式？

2 个答案: