时间戳

首页 > 解决方案 > 尽管有主题，为什么我的 Material UI 排版没有响应？

javascript - 尽管有主题，为什么我的 Material UI 排版没有响应？

问题描述

我只需要我在材质 UI 中的文本随视口一起缩小，但我只能让它换行。我一直在关注材料 UI 文档，但即使他们的示例在我的代码中也不起作用。

import React, { useState } from 'react';
import { Grid, Typography } from '@material-ui/core';
import { createMuiTheme, responsiveFontSizes, ThemeProvider } from '@material-ui/core/styles';
// import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Search from './Search';
import LanguageFilter from './LanguageFilter';
import RepositoryList from './RepositoryList';
import Sort from './Sort';

let theme = createMuiTheme();
theme = responsiveFontSizes(theme);

const App = () => {
  const [results, setResults] = useState([]);
  const [filter, setFilter] = useState('');
  const [sort, setSort] = useState('default');

  return (
    <Grid
      container
      direction="column"
      alignContent="center"
      alignItems="center"
      spacing="3"
    >
      <Grid item>
        <ThemeProvider theme={theme}>
          <Typography variant="h1">GitHub Repo Search</Typography>
        </ThemeProvider>
      </Grid>
      <Grid item>
        <Search setResults={setResults} sort={sort} />
      </Grid>
      <Grid item>
        <Grid container alignItems="center" justify="center">
          <Sort sort={sort} setSort={setSort} />
          <LanguageFilter setFilter={setFilter} />
        </Grid>
      </Grid>
      <Grid item>
        <RepositoryList results={results} filter={filter} />
      </Grid>
    </Grid>
  );
};

export default App;

这是我正在使用的组件。我尝试在组件内部和外部定义主题，这只是我来这里之前的最后一次尝试。不知道如何使它具有响应性，并且在网上找不到任何适合我的东西。

标签： javascriptreactjsmaterial-ui

解决方案

解决了。我需要让我的 ThemeProvider 包装我的整个应用程序，而不仅仅是在需要的地方。

推荐阅读