更改所有material-ui(版本1)组件的字体系列

Question

我们可以用更少的代码更改material-ui组件的字体系列.我尝试了很多方法,但我仍然无法做到.我必须单独更改字体系列,这真的是很多工作.有没有其他方法可以做到这一点？

Answer 1

您可以在material-ui @ next库中更改字体,执行以下操作.假设在你<App />的定义如下

// Material UI
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

const App = () => (
  <MuiThemeProvider theme={THEME}>
    <Provider store={store}>
      <Router history={appHistory} routes={Routes} />
    </Provider>
  </MuiThemeProvider>
 );

 ReactDOM.render(<App />, document.getElementById('app'));

在theme道具为MuiThemeProvider您提供以下所在

const THEME = createMuiTheme({
   typography: {
    "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
    "fontSize": 14,
    "fontWeightLight": 300,
    "fontWeightRegular": 400,
    "fontWeightMedium": 500
   }
});

然后在您css或您的主index.html文件中的某处包含此内容@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

有关所有参数的列表,您可以提供createMuiTheme 默认主题参数关于文档本身更改MuiTheme,它们如下所示.主题材质UI下一步

关于该<Reboot />部分,您可以在此处查看文档材料UI重新启动详细信息

Answer 2

在 MUI v5 中，还要确保 ThemeProvider 和 createTheme 是从而@mui/material/styles不是从@mui/styles. 我花了几个小时思考为什么它不起作用。

\n

import { ThemeProvider, createTheme } from '@mui/styles'; \xe2\x9d\x8c\n\nimport { ThemeProvider, createTheme } from '@mui/material/styles'; \xe2\x9c\x85\n\nconst theme = createTheme({\n  typography: {\n    allVariants: {\n      fontFamily: 'serif',\n      textTransform: 'none',\n      fontSize: 16,\n    },\n  },\n});\n\nfunction App() {\n  return (\n      <ThemeProvider theme={theme}>\n        ...\n      </ThemeProvider>\n  );\n}\n

\n

Answer 3

在MUI v5中，您可以轻松更新fontFamily所有变体的 或任何其他 CSS 属性Typography：

const theme = createTheme({
  typography: {
    allVariants: {
      fontFamily: 'serif',
    },
  },
})

要在应用程序中动态更改fontFamily，您可以根据最新值useMemo创建一个新对象：themefontFamily

const defaultFontFamily = 'serif';
const [fontFamily, setFontFamily] = React.useState(defaultFontFamily);

const theme = React.useMemo(
  () =>
    createTheme({
      typography: {
        allVariants: { fontFamily },
      },
    }),
  [fontFamily],
);

return (
  <div>
    <Select
      defaultValue={defaultFontFamily}
      onChange={(e) => setFontFamily(e.target.value)}
    >
      <MenuItem value="serif">serif</MenuItem>
      <MenuItem value="sans-serif">sans-serif</MenuItem>
    </Select>
    <ThemeProvider theme={theme}>
      <Content />
    </ThemeProvider>
  </div>
);

现场演示

Answer 4

希望这可以帮助某人...在声明样式时需要非常小心逗号和括号createMuiTheme

这真的很容易搞砸。例如，调色板是一个大对象......排版也是如此，确保一切都在正确的位置。我遇到了由于这样做错误而引起的随机问题。

  palette: {
    primary: {
      light: '#ff8e8c',
      main: '#ff5a5f',
      dark: '#c62035',
      contrastText: '#fff',
    },
    secondary: {
      light: '#4da9b7',
      main: '#017a87',
      dark: '#004e5a',
      contrastText: '#000',
    },
  },
  typography: {
    allVariants: {
      fontFamily: "'Montserrat', sans-serif",
      textTransform: "none",
    }
    button: {
      textTransform: "none",
    }
  },

Answer 5

**** 更新 *****

添加到Adeel接受的答案中。

对于最新的Material-UI（v4 +）组件，导入和MuiThemeProvider均已更改。

现在，在您的中App.js，执行以下操作：

import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import './Styles/App.css';

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Nunito',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif'
    ].join(','),
  }
});

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <div className="App">
          <MainApp />
        </div>
      </ThemeProvider>
    );
  }
}

export default App;

现在，例如，我添加了Nunito字体。因此，我必须通过以下方式将其添加到中App.css（在中导入App.js）：

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), 
   url(https://fonts.gstatic.com/s/nunito/v11/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) 
   format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, 
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, 
    U+2215, U+FEFF, U+FFFD;
}