Пользовательский интерфейс материала: ссылки на другие свойства createMuiTheme внутри файла theme.ts? - PullRequest
Новая
       10

Пользовательский интерфейс материала: ссылки на другие свойства createMuiTheme внутри файла theme.ts?

1 голос
/ 01 ноября 2019

При импорте темы вроде этой (в filename.style.ts): 

import theme from 'common/theme';

Я могу получить доступ к различным свойствам, как, например, 

theme.breakpoints.down('md')

Я пытаюсь сослатьсято же свойство внутри файла theme.ts, но, разумеется, ... theme. здесь недопустимо, поэтому я пытаюсь найти способ, которым я могу повторно использовать / ссылаться на него.

Как вы видите на MuiTable, я пытаюсь получить доступ к точкам останова и палитре / первичному .

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

},
});

1 Ответ

1 голос
/ 01 ноября 2019

Создайте свою тему из отдельных 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
        },
      },
    },
  },
});
...