Question

我有一个使用Material-UI的React组件，称为“配置文件”，并使用自定义CSS来创建自适应字体大小，例如：

let theme = createMuiTheme();

theme = responsiveFontSizes(theme);

theme.typography.h1 = {
    fontSize: '5.35rem',
    '@media (min-width: 600px)':{
        fontSize: '3.0rem',
    },
    '@media (max-width: 600px)':{
        fontSize: '2.2rem'
    },
    [theme.breakpoints.up('md')]:{
        fontSize: '5.35rem'
    }
}

返回的前几行是：

export default function Profile () {
        return (
            <div>
                <ThemeProvider theme={theme}>
                    <Grid container direction="row">
                        <Grid item className="profile">

当我将此组件包含在index.js文件中时，它可以完美呈现。但是，一旦添加了一个名为“ PublicWorks.js”的新组件，如下所示：

  <React.StrictMode>
      <Header />
      <Profile />
      <PublicWorks />
  </React.StrictMode>,

响应式样式不再起作用。 PublicWorks的代码非常简单，基本上就是这样（带有合适的右括号）：

import React from 'react';
import {Grid, Typography, Accordion, AccordionSummary, AccordionDetails, ThemeProvider} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

export default function PublicWorks () {

    return (
        <div>
            <Accordion>
                <AccordionSummary expandIcon={<ExpandMoreIcon />} >
                    <Typography>Project 1</Typography>
                </AccordionSummary>
                <AccordionDetails>

此压抑是由MuiTheme的性质在全球范围内引起的，还是我做错了其他事情？我应该尝试类似的东西吗？

  <React.StrictMode>
    <ThemeProvide theme={theme}>
      <Header />
      <Profile />
      <PublicWorks />
    </ThemeProvide>
  </React.StrictMode>,

为了正确执行此操作？

Answer 1

我认为您遇到的问题可能与this issue有关。

无论如何，通常您需要使用ThemeProvider作为组件的父级，因为它使用React Context

此组件采用主题属性，并使其在由于上下文的原因，React树。最好在组件树的根。

文档：https://material-ui.com/styles/api/#themeprovider

关于您的评论And if I just want it in Profile?

如果您选择单独设置组件的样式，则可以使用其他解决方案，例如makeStyles

为什么添加新的React组件时我的样式会被覆盖？

1 个答案: