如何更改mui主题中的响应断点值?

时间:2018-02-28 17:33:13

标签: material-ui

我正在使用材料-ui的v1 beta。媒体查询断点与我正在使用的Bootstrap v4断点不同,我想覆盖material-ui断点的值以匹配Bootstraps的值。

我需要做类似下面的事情,但我找不到足够的文档来让它发挥作用。

当前错误是:“尝试将createBreakpoints()作为函数引用时,未捕获的TypeError:Object(...)不是函数。”

...
import { MuiThemeProvider, createMuiTheme, createBreakpoints } from "material-ui/styles";

const breakpointValues = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
};
const breakpoints = createBreakpoints({ values: breakpointValues });
const theme = createMuiTheme({ breakpoints });

...

<MuiThemeProvider theme={theme}>
  <App />
</MuiThemeProvider>

...

1 个答案:

答案 0 :(得分:5)

哦,我想通了。需要将我的新值传递给createMuiTheme函数,该函数在内部调用createBreakpoints func。

const breakpointValues = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
};
const theme = createMuiTheme({ breakpoints: { values: breakpointValues } });