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

IT技术 reactjs typescript material-ui
2021-05-15 15:58:25

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

import theme from 'common/theme';

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

theme.breakpoints.down('md')

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

正如您在 MuiTable 上看到的，我正在尝试访问断点和Palette/primary。

主题.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,
        },
      },
    },
  },
},

},
});
3个回答

从单个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
        },
      },
    },
  },
});

Ricky 的解决方案在实践中很好，但 Material警告不要导入超过两个级别（在这种情况下为 @material-ui/core/styles/foo），因为这被认为是私有的，而不是任何公共合同的一部分。即，它可以更改任何版本。

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

您可以在主题声明后附加props。

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)
    }
  }
};

其它你可能感兴趣的问题
上一篇React input 或 material-ui TextField 在 material-ui TreeView 中不起作用 下一篇如何使用传单图表在reactjs中显示数组中的标记