reactjs - Material UI：在 theme.ts 文件中引用 createMuiTheme 的其他属性？

Question

像这样导入主题时（在 filename.style.ts 中）：

import theme from 'common/theme';

我可以访问不同的属性，例如

theme.breakpoints.down('md')

我试图在 theme.ts 文件中引用相同的属性，但是当然......主题。在这里无效，所以我试图找到一种可以重用/引用它的方法。

正如您在 MuiTable 上看到的，我正在尝试访问断点和调色板/主文件。

主题.ts

import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
export const MuiPaperBackgroundColor = '#f7f8f6';

export default createMuiTheme({
spacing: 8,
breakpoints: {
  values: {
    xs: 0, sm: 600, md: 960, lg: 1280, xl: 1650,
  },
},
palette: {
  primary: {
    main: '#3f18aa',
    extraLight: 'rgb(193, 181, 227)',
    noDataColor: '#cccccc',
    cardBgColor: '#ECECEC',
    chartColors: [
      '#E77F42',
      '#F3C3A3',
    ],
  },
overrides: {
 MuiTable: {
  root: {
    whiteSpace: 'nowrap',
    [theme.breakpoints.down('md')]: {
      '& tr': {
        '& td:first-child, & th:first-child': {
          position: 'sticky',
          left: 0,
          backgroundColor: theme.palette.header.main,
          color: theme.palette.primary.contrastText,
          zIndex: 2,
        },
      },
    },
  },
},

},
});

标签： reactjstypescriptmaterial-ui

Answer 1

material-ui从单独的包中构建您的主题。我是这样做的：

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

const breakpoints = createBreakpoints({ 
  // your settings
});

const theme = createMuiTheme({
  breakpoints,
  overrides: {
    MuiTable: {
      root: {
        [breakpoints.down('md')]: {
          // style
        },
      },
    },
  },
});