Question

这是我的theme.ts文件，我在其中创建了Muitheme和fontfamily

import 'typeface-inconsolata'
import 'typeface-quicksand'

import { createMuiTheme, responsiveFontSizes } from '@material-ui/core'
import indigo from '@material-ui/core/colors/indigo'
import yellow from '@material-ui/core/colors/pink'
import red from '@material-ui/core/colors/red'

const theme = createMuiTheme({
    typography: {
        fontFamily: 'typeface-inconsolata, typeface-quicksand',
        fontSize: 17,
        fontWeightLight: 300,
        fontWeightRegular: 400,
        fontWeightMedium: 500,
    },

    palette: {
        primary: indigo,
        secondary: red,
        error: yellow,
        // Used by `getContrastText()` to maximize the contrast between the background and
        // the text.
        contrastThreshold: 4,
        // Used to shift a color's luminance by approximately
        // two indexes within its tonal palette.
        // E.g., shift from Red 500 to Red 300 or Red 700.
        tonalOffset: 0.6,
    },
})

export const responsiveTheme = responsiveFontSizes(theme)

这是我的组件所在的App.tsx文件，因此我想更改Appbar和Grid中单词的字体

import {
    AppBar,
    Card,
    CardHeader,
    Container,
    createStyles,
    Grid,
    makeStyles,
    Toolbar,
    Typography,
} from '@material-ui/core'
import CssBaseline from '@material-ui/core/CssBaseline'
import { ThemeProvider } from '@material-ui/styles'
import React, { FC } from 'react'

import logo from '../icons/logo.svg'
import { responsiveTheme } from '../theme'

const useStyles = makeStyles(theme =>
    createStyles({
        main: {
            height: '90vh',
            background: `url(${logo}) no-repeat center / 200px`,
            marginTop: theme.spacing(10),
        },
    })
)

const App: FC = () => {
    const classes = useStyles()

    return (
        <ThemeProvider theme={responsiveTheme}>
            <CssBaseline />

            <Container maxWidth="lg">
                <AppBar color="secondary" position="fixed">
                    <Toolbar>
                        <Typography variant="h6" noWrap>
                            Projektvorlage
                        </Typography>
                    </Toolbar>
                </AppBar>

                <div className={classes.main}>
                    <Grid container spacing={2} justify="center">
                        {['Pfannkuchen', 'Pizza', 'Salat', 'Nudeln mit Tomatensauce'].map(
                            recipe => (
                                <Grid key={recipe} item xs={12} md={6} lg={4}>
                                    <Card>
                                        <CardHeader title={recipe} />
                                    </Card>
                                </Grid>
                            )
                        )}
                    </Grid>
                </div>
            </Container>
        </ThemeProvider>
    )
}

export default App

所以基本上我想更改文本的字体，但是我不知道如何使用我的字体家族。有“变体”，但我不明白它们的确切含义，我是新来的反应/打字稿。

Answer 1

如果您想继续通过Material-UI引入样式，我要做的是在包含所有全局样式的父级中创建自己，如下所示：

globalStyles.styles.tsx

array_multisort(array_column($product, 'count'), SORT_DESC, $product);

app.component.tsx

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

export const globalStyles = (theme: Theme) => createStyles({
  "@global": {
    body: {
      maxHeight: "100vh",
      margin: 0,
      fontFamily: 
    },
    "#root": {
      maxHeight: "100vh",
  },
});

PD：应用组件必须位于const AppInner: React.FC<AppProps> = props => { ... }; const App = withStyles(globalStyles)(AppInner);内

我如何在我的React App中使用自定义字体家族

1 个答案: