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

【问题标题】：Material UI : Reference other properties of createMuiTheme inside theme.ts file?Material UI：在 theme.ts 文件中引用 createMuiTheme 的其他属性？
【发布时间】：2019-10-31 21:26:33
【问题描述】：

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

import theme from 'common/theme';

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

theme.breakpoints.down('md')

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

正如您在 MuiTable 上看到的，我正在尝试访问 breakpoints 和 palette/primary。

theme.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,
        },
      },
    },
  },
},

},
});

【问题讨论】：

在这里查看我的答案：stackoverflow.com/questions/56532599/…
感谢@RyanCogswell :) 这实际上为我解决了它！.. 谷歌搜索了很多以找到解决方案，但没有找到任何东西..
你能把这个作为答案发给我吗？
只需对另一个投票，然后我会将其标记为重复，以便交叉引用它（我不能将其标记为不被接受且不被接受的答案的重复）没有任何赞成票）。
支持您的评论.. 谢谢 :)

标签： reactjs typescript material-ui

【解决方案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
        },
      },
    },
  },
});

【讨论】：

【解决方案2】：

Ricky 的解决方案在实践中很好，但 Material warns against importing deeper than two levels（在这种情况下为 @material-ui/core/styles/foo）因为它被认为是私有的，而不是任何公共合同的一部分。即，它可以更改任何版本。

它可能不适用于断点，但颜色或 fontWeights 等可以很容易地共享为之前声明的普通常量。但我也怀疑在此声明中首先包含响应性是否是一个好主意。

【讨论】：

【解决方案3】：

你可以在主题声明后附加道具。

let theme = createMuiTheme({
  overrides: {
    MuiAppBar: {
      root: {
        transform: 'translateZ(0)'
      }
    }
  },
  props: {
    MuiIconButton: {
      disableRipple: true
    }
  }
});

theme = responsiveFontSizes(theme);

theme.overrides.MuiCssBaseline = {
  '@global': {
    '.testMe': {
      color: 'red'
    },
    '.container-std': {
      [theme.breakpoints.up('lg')]: {
        maxWidth: '1200px',
        marginLeft: 'auto',
        marginRight: 'auto'
      }
    },
    '.container-wide': {
      margin: theme.spacing(2, 2)
    }
  }
};

【讨论】：