reactjs - 如何自定义fontFamily Chip rect material-ui

Question

我想自定义字体家族芯片，但它不起作用...................................... ..................................................... ..................................................... ...........

import { createMuiTheme } from '@material-ui/core';
import overrides from './overrides';
import palette from './palette';
import typography from './typography';

const theme = createMuiTheme({
  palette,
  typography,
  overrides,
});

export default theme;

import MuiChip from './MuiChip';
import MuiTooltip from './MuiTooltip';

export default {

  MuiTooltip,
  MuiChip
};

export default {
chip: {
    fontFamily: ['prompt'].join(',')
  }
};

标签： reactjsmaterial-ui

Answer 1

您可以使用 createMuiTheme 覆盖默认主题，然后将组件包装如下

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/core';

const theme = createMuiTheme({
    overrides: {
        MuiChip: {
            root: {
                padding: '3px 4px',
                fontFamily: "'Bree Serif', sans-serif",
                fontSize: "15px"
            },
        },
    },
});

export default Component = props => {
   return (
        <ThemeProvider theme={theme}>
            <Chip size="small" label="Basic" />
        </ThemeProvider>
   );
}