Question

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

Answer 1

您可以更改material-ui @ next库中的字体，执行以下操作。假设您的POLYGON((50.866753 5.686455, 50.859819 5.708942, 50.851475 5.722675, 50.841611 5.720615, 50.834023 5.708427, 50.840744 5.689373, 50.858735 5.673923, 50.866753 5.686455))定义如下

<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'));的{{1}}道具中，您提供以下

theme

然后，MuiThemeProvider或您的主const THEME = createMuiTheme({ typography: { "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif", "fontSize": 14, "fontWeightLight": 300, "fontWeightRegular": 400, "fontWeightMedium": 500 } });文件中的某处包含此css

有关您可以提供给index.html Default Theme Params的所有参数的列表。关于更改MuiTheme的文档本身，它们如下所示。 Themes Material UI Next

关于@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');部分，您可以查看此处的文档Material UI Reboot Details

Answer 2

**** 更新 *****

添加到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;
}

Answer 3

希望这对某人有帮助...在createMuiTheme内声明样式时，请务必小心用逗号和括号

弄乱这一点真的很容易。例如，调色板是一个大对象……版式也是如此，请确保所有内容都放置在正确的位置。我因做错了事而产生了随机问题。

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


   button: {

    textTransform: "none",

  },

Answer 4

这是现在的首选方法：

import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  typography: {
    // Use the system font instead of the default Roboto font.
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
  },
});


const App = () => (
  <MuiThemeProvider theme={theme}>
    {/* route container, redux container, etc... */}
  </MuiThemeProvider>
 );

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

如此处所述： https://material-ui.com/customization/themes/#typography

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

4 个答案: