Material UI的CSSBaseline breaking react-提及
Material UI是一个流行的React UI组件库，提供了一套美观、易用的UI组件，可以帮助开发者快速构建现代化的Web应用程序。CSSBaseline是Material UI中的一个组件，用于重置浏览器默认样式，确保应用程序在不同浏览器和设备上具有一致的外观。
在React开发中，当使用Material UI组件库时，可以通过引入CSSBaseline组件来应用全局的样式重置。CSSBaseline会重置浏览器的默认样式，包括字体、边距、行高等，以确保应用程序在不同浏览器上具有一致的外观。
使用CSSBaseline的优势包括：
- 统一外观：CSSBaseline可以确保应用程序在不同浏览器和设备上具有一致的外观，避免因浏览器默认样式的差异而导致的界面不一致问题。
- 提高开发效率：通过使用Material UI的CSSBaseline，开发者无需手动编写大量的样式重置代码，可以节省开发时间和精力。
- 响应式设计：CSSBaseline可以确保应用程序在不同屏幕尺寸和设备上具有良好的响应式设计，提供更好的用户体验。
CSSBaseline适用于任何使用Material UI的React应用程序，特别是那些希望快速构建具有一致外观的现代化Web应用程序的开发者。
腾讯云提供了一系列与云计算相关的产品，其中与React开发相关的产品包括云服务器CVM、云数据库MySQL、对象存储COS等。这些产品可以与Material UI和CSSBaseline结合使用，帮助开发者构建高性能、可靠的React应用程序。
更多关于腾讯云产品的介绍和详细信息，可以参考腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我试图在Material-UI中为我的项目使用CssBaseline组件，但是自从试图弄清楚如何让它工作以来，我遇到了这个错误： ./node_modules/material-ui/styles/MuiThemeProvider.js
Module not found: Can't resolve '@babel/runtime/core-js/object/get-prototype-of' in '.\node_modules\material-ui\styles' 这是我的package.json "dependencies"
浏览 58提问于2018-12-26得票数 1
回答已采纳
2回答
我正在尝试使用<Typography align="center">作为页脚，以使文本居中对齐，但它不起作用。如何将文本居中对齐？
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
im
浏览 4提问于2021-06-13得票数 0
我正在尝试在next.js / react.js中使用material-ui。
当通过_app.js应用布局文件时，我得到一个错误。
这使用的是react.js模板material-ui提供的示例(这让人困惑，为什么它不能简单地工作-我得到的印象是material-ui通常与next.js有问题？)
我尝试了几种不同的方法，更改文档和应用程序，似乎仍然不起作用。
这是Layout.js文件
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@ma
浏览 16提问于2019-07-29得票数 4
回答已采纳
当我在onchange事件期间使用输入单元格时，使用react钩子组件，状态更改会导致组件刷新，输入字段失去焦点。我查看了上面发布的github链接，但没有查看react-table v6上推荐的修复结果。即时消息在react-表7.6.3
const handleInitialDemandChange = (cell, e) => {
const name = cell.row.original.id
e.persist();
setFieldValues({
...fieldValues,
[name]: e.target.valu
浏览 58提问于2021-02-27得票数 0
我正在开发一个ReactJS应用程序，我可以通过两种方式从库中导入类。第一个是使用一个import子句并在方括号中指定我想要的类：
import { makeStyles, CssBaseline, Box } from '@material-ui/core';
第二个是在不同的import子句中指定每个类：
import makeStyles from '@material-ui/core/makeStyles';
import CssBaseline from '@material-ui/core/CssBaseline';
import B
浏览 9提问于2020-01-01得票数 6
回答已采纳
2回答
我需要能够呈现一个组件，然后使用useEffects进行额外的呈现。在下面的代码中，组件提供了一个主题，每个useEffect呈现有自己主题的组件。
但最终，react呈现原始组件的样式会被第二个useEffect组件的主题覆盖。
使用此设置，如何在不泄漏样式的情况下将每个主题应用于其相应的组件？
使用React 17.0.2和material 4.12.4下面是相关代码：
import React from "react";
import ReactDOM from "react-dom";
import { createTheme, ThemeProvid
浏览 4提问于2022-09-20得票数 -1
我使用使我的项目与RTL兼容。
但出于某种原因，Material图标<Send/>没有相应地翻转。是因为它与RTL不兼容吗？还是我漏掉了什么？
下面是一个显示Send图标不翻转的示例：
import React from "react";
import { create } from "jss";
import rtl from "jss-rtl";
import {
StylesProvider,
jssPreset,
ThemeProvider,
createMuiTheme
} from "@materi
浏览 4提问于2020-10-11得票数 5
回答已采纳
1回答
我试图改变我的文件的背景颜色，我的脚使用材料-用户界面与反应。我使用createMuiTheme进行了颜色示例演示，然后使用了MuiThemeProvider，但它没有工作。我需要用抽屉才能让它工作吗？
import React from 'react';
import Link from 'react-router-dom';
import Paper from '@material-ui/core/Paper';
import CssBaseline from '@material-ui/core/CssBaseline'
浏览 0提问于2019-03-04得票数 0
我正在考虑这样做，但我不确定这是否是推荐的方法：
import * as React from "react"
import { withStyles, createStyles, Theme } from "@material-ui/core"
import CssBaseline from "@material-ui/core/CssBaseline"
// global styles for a Mapper app
class MyCssBaseline extends React.Component {
render() {
浏览 0提问于2019-06-15得票数 0
当用户重新加载、访问新页面或在浏览器上按回时，我如何让我的亮/暗主题持久保存为一种状态...现在它是非常不一致的。 这是我设置主题的index.js。我把它包装在我的组件上。 index.js import { ThemeProvider, CssBaseline } from "@material-ui/core";
import { createMuiTheme } from "@material-ui/core";
const MyThemeContext = React.createContext({});
export function useM
浏览 21提问于2021-01-16得票数 1
回答已采纳
1回答
我试图跟踪的答案，但我得到了一个错误。
TypeError: Object(...) is not a function
const theme = createMuiTheme();
我试图让<CssBaseline />应用它的默认样式。我怎么能做到呢？这是我的App.js
import React, { Component } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import NavBar from './components/he
浏览 1提问于2018-12-25得票数 1
回答已采纳
1回答
我目前正在学习ReactJS，并遵循了一个教程，该教程帮助我在使用firebase进行网页身份验证和授权方面有了一个良好的开端。现在我正在使用material-ui中的登录页面模板，并尝试将其与我当前的代码合并。我没有问题的网格等显示，但我不能让样式工作，因为我得到了这个无效的钩子调用错误在运行。登录类在下面，错误也在下面。 import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import Avatar from '@material-
浏览 20提问于2020-08-29得票数 1
回答已采纳
我用react，next和material-ui对我的演示应用程序应用了背景图片。在我的_app.js中，我有这样的代码：
import React from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../components/theme';
export default functio
浏览 1提问于2020-07-15得票数 0
使用MUI 4.12，我已经将类型设置为黑暗，并使用了CssBaseline，这是我在其他答案中看到的解决方案，但它似乎完全被忽略了。
import {React, Fragment} from 'react'
import {
createTheme,
ThemeProvider,
makeStyles,
Zoom,
Fab,
useScrollTrigger,
Box,
CircularProgress
} from "@material-ui/core";
import CssBa
浏览 2提问于2021-10-30得票数 2
回答已采纳
在应用"ThemeProvider“标记时，我看不到任何更改，即使在一个简单的项目中也是如此，如下所示。浏览器控制台中没有错误/警告(除了未使用的导入，但即使我将它们全部删除，它也会失败)。
import React, { Component } from "react";
import Grid from "@material-ui/core/Grid";
import CssBaseline from "@material-ui/core/CssBaseline";
import MainBar from "./modules
浏览 0提问于2019-05-10得票数 4
回答已采纳
嘿，伙计们，我是一个非常新的反应，正在遵循一个关于钩子的教程，并想尝试一下，我现在还不知道代码是正确的，因为我在if语句条件中得到了错误，以检查登录状态。这就是弹出的错误。 ./src/components/Header.js
Line 50:20: Parsing error: Unexpected token, expected ","
48 |
49 | return (
> 50 | {if(loggedIn === true) {
| ^
51 | retur
浏览 40提问于2020-09-26得票数 1
回答已采纳
3回答
材料-刷新后用户界面中断
、、、
我使用的材料用户界面与Next.js。我在npm run dev上跑步。我的问题是，每当我按下浏览器上的重新加载按钮时，站点上的样式就会完全中断。这是正常行为吗？似乎材料-用户界面停止工作。
这是我的密码。
我有一个index.js和一个组件。
索引
import React, { Component } from 'react'
import CssBaseline from '@material-ui/core/CssBaseline';
import { MuiThemeProvider, createMuiTheme } from '@mater
浏览 0提问于2018-08-19得票数 7
回答已采纳
每当按钮改变主题时，我想要更新CssBaseline组件，但是它没有。当按钮被点击时，主题似乎被改变了，但是CssBaseline所做的并没有改变，比如主体的背景颜色等等。 有什么方法可以改变它吗？ index.js import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App/>
</React.Str
浏览 16提问于2020-10-08得票数 0
回答已采纳
我正在做我的第一个材料UI - CSS Next.js项目。
问题：
当我在我的chrome工具中禁用JS时，不会应用这种样式。现在，我不明白这是否与物质UI有关？或者用我引进风格的方式？
我到现在还没找到答案。任何帮助都是非常感谢的。非常感谢！！
以下是一些相关代码：
//pages/_document.js
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets
浏览 6提问于2021-02-02得票数 1
回答已采纳
2回答
我是nextjs中的新手，使用nextjs v9.3、next-redux-wrapper v5、@material-ui/core v4.2和custom express server。
在我的Nextjs应用程序中更改路由时，我试图实现加载屏幕，所以我使用在页面之间进行转换，工作正常，但是现在如何在更改路由时使用加载组件？
我目前的实现如下：
_app.js
import React, { useEffect } from "react";
import { ThemeProvider } from "@material-ui/core/styles";
i
浏览 3提问于2020-04-13得票数 11
我使用的是ReactJS和名为MaterialUI的组件库。我有一个关于排版组件的问题。
如果我写了一个很长的文本，它会超出它的容器，并且不会换一行：
import React from "react";
import { Redirect } from "react-router";
import { withRouter } from "react-router-dom";
import Container from "@material-ui/core/Container";
import CssBaseline from
浏览 9提问于2020-03-11得票数 5
回答已采纳
我试图加载一个背景图像，但似乎无法使它渲染。在我的组件中，当我用require('imagepath')加载一个图像时，它会在它构建时将它更改为url('imagepath')。但是，当我试图在我的风格中加载这个我把它放到主题中时，它不会呈现。相反，我必须做这个古怪的负担。(见背景图片)我做错了什么？
import React, { Component } from 'react';
import '../styles/App.css';
import CssBaseline from '@material-ui/cor
浏览 1提问于2018-10-29得票数 0
回答已采纳
我使用的材料-Ui v5在我的反应项目！
import React, { useState } from "react";
import rtlPlugin from "stylis-plugin-rtl";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
import { ThemeProvider, createTheme } from "@mui/material/styles"
浏览 1提问于2021-12-18得票数 1
回答已采纳
我使用的是带有类型记录的NextJS，当我试图构建代码时，_app.tsx文件中会出现以下错误：
属性'Component‘在类型'App<{}，{}，{}>’上不存在。
我从AppProps类型('next/app')获得组件，这是代码：
import React from "react";
import { CssBaseline } from "@material-ui/core";
import { ThemeProvider } from "@material-ui/core/styles"
浏览 4提问于2021-01-20得票数 1
回答已采纳
我正在寻找设置SPA页面布局的最佳方法，SPA由顶部的静态标题(AppBar)和标题下面的动态页面内容组成。页面内容ScreenSizePage有时(但并非总是)的高度应该与屏幕的剩余高度完全匹配。换句话说:怎样才能使div在ScreenSizePage中的高度完全符合素材UI应用程序中剩余的屏幕高度？
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from '@material-ui/core/CssBaseline&
浏览 1提问于2019-10-16得票数 3
回答已采纳
我已经设置了调色板类型:在createMuiTheme中暗，它将背景颜色更改为暗，这是很好的。但文字的颜色仍然是黑色。它不应该适应较浅的颜色吗？
CodeSandbox链接：
import React from 'react';
import ReactDOM from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/co
浏览 0提问于2018-08-28得票数 4
回答已采纳
1回答
我正在学习MUI，但我在调试CSS问题时遇到了困难。基本上，在将导出到自己的组件中后，我的样式会中断。经过大量的试验和错误，我发现我的进口是罪魁祸首... 我第一次有了这个： import {
Avatar,
CardContent,
CardHeader,
CssBaseline,
IconButton,
Typography,
} from "@material-ui/core";
import Card from "@material-ui/core/Card"; 这不起作用，但是把import改成这样就解决了这个问题： import {
Card,
A
浏览 12提问于2021-09-08得票数 0
回答已采纳
我在ReactJs中创建了一个名为MainPage的主要组件(使用Material)。
import React from 'react';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import Card from '@material-ui/core/Card';
浏览 0提问于2019-01-14得票数 4
回答已采纳
我想看到所包含的主按钮的颜色在主题更改时略有改变，但我做不到。
我发现如果通过删除“variant=”包含的按钮将按钮从“包含”按钮改为“文本”按钮，效果会很好，但我真的想使用“包含”按钮
有什么办法让它起作用吗？
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
// Because of <React.StrictMode>, <CssBaseli
浏览 1提问于2020-10-08得票数 2
回答已采纳
在资料UI的文档中，我发现了以下代码：
import React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from
浏览 1提问于2020-05-03得票数 3
回答已采纳
1回答
在create-react-app中，我使用的是react-jss，因为默认情况下不包含jss-plugin-expand插件。我有了<StylesProvider jss={reactJss}>，一切都运行得很好。然而，现在我切换到Gatsby，完全相同的设置停止工作。现在，flex: [1, 1, '70px']被编译为flex: 1, 1, 70px (带逗号)。 import React from 'react'
import { jss } from 'react-jss'
import { StylesProvider,
浏览 24提问于2020-08-15得票数 1
我刚接触material ui/core，在做组件时有点困惑。问题是，我无法显示登录页面没有应用程序栏和抽屉。我想显示完整的登录页，没有标题和侧边栏。在这个问题上，有人能帮我吗？
下面是完整的代码："“
登录页面代码：
import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui
浏览 6提问于2020-03-06得票数 1
回答已采纳
我正在为我的网站标题工作，并希望使用材料UI。标题包括一个徽标，一些导航链接，一个带有下拉菜单的头像，等等。我的问题现在围绕着导航链接的样式。使用Material-UI，我是否需要将类应用到我想要样式化的/ want /元素？例如，我目前有一个应用程序，它看起来像这样：
import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Avatar from '@material-ui/core/Avatar';
import CssBaseline
浏览 19提问于2020-03-06得票数 1
回答已采纳
这是我的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/
浏览 0提问于2019-11-28得票数 0
最近，材料UI 5发布了。以前(在资料UI 4中)，我通过修改_document.js和_app.js来连接它。材料UI 5也是一样的吗？
多用户界面_app.js的
import CssBaseline from '@material-ui/core/CssBaseline';
import {ThemeProvider} from '@material-ui/core/styles';
class MyApp extends App {
render() {
const {Component, pageProps, router} =
浏览 4提问于2021-11-16得票数 2
我正在尝试在Next.js应用程序中使用库。
我在/pages中添加了_app.js文件作为，作为放置选取器提供程序的位置：
import React from "react";
import PropTypes from "prop-types";
import { ThemeProvider } from "@material-ui/core/styles";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils
浏览 1提问于2020-08-09得票数 3
我有一个导航栏，我正在试着修复它。问题是，只有当您在搜索栏中键入路由时，路由器才能工作。当我单击选项卡时，它不会重新路由。只有home按钮选项卡可用，而其他选项卡不起作用 import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
imp
浏览 32提问于2020-11-09得票数 0
回答已采纳
我试图将添加到SwipeableDrawer中：
即使在抽屉关闭时，边缘也应该出现，这样用户就可以点击它并滑动抽屉打开它。
问题是，在我的应用程序，当它关闭时，它不会出现。只有当抽屉用“打开”按钮打开时才会出现。
下面是我的应用程序中的代码：
import * as React from "react";
import PropTypes from "prop-types";
import { Global } from "@emotion/react";
import { styled } from "@material-ui/c
浏览 4提问于2022-09-15得票数 0
回答已采纳
1回答
我正在尝试将这个现成的免费模板用于登录页面，问题是源代码不同，我必须调整它以适应工作。在src代码@mui/material/中存在此导入问题，我必须将其转换为@material-ui/才能工作。但问题是，我的页面看起来像下面这样，没有颜色，主题不能加载，因为某些原因，sx不能工作，你知道这里有什么问题，为什么src代码不同但还能工作吗？
A.
B.
Source Singup页面
在next.js本地主机上呈现的我的注册页面
import React from 'react';
import Avatar from '@material-u
浏览 3提问于2021-09-15得票数 0
我已经在我的App.js中创建了一个主题，它覆盖了原色和次色。我让ThemeProvider包装了一个Home零部件。被替代的值不会显示在Home构件中。我做错了什么？ App.js import React from 'react'
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'
import purple from '@material-ui/core/colors/purple'
import green from '@materi
浏览 17提问于2020-07-04得票数 3
回答已采纳
2回答
我在更改<AppBar>背景颜色时遇到问题。我使用Container组件来设置最大屏幕大小。 当屏幕尺寸大于最大屏幕尺寸时，这会导致问题。AppBar的背景颜色是预期的，其余的是白色。 如何删除白色并使其与<AppBar>背景色匹配？ ? 如何才能使白色与<AppBar>颜色相匹配，从而使导航看起来一致？ 这就是我到目前为止所知道的： import React from 'react';
import {CssBaseline, Container} from '@material-ui/core/';
import
浏览 20提问于2020-03-25得票数 0
嗨，我刚刚用React启动了我的第一个应用程序。我正在使用一个简单的登录组件，在我使用npm start之后，它抛出了这个错误:模块找不到:无法解析'D:\own_files\ReactTutorial\react-app\src‘中的'@material-ui/core/Avatar’。
我有基本的React代码
这是我的App.js：
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom
浏览 1提问于2020-02-25得票数 0
回答已采纳
弹出此错误。 Cannot read property 'direction' of null 127 | var options = (0, _extends2.default)({}, stylesCreator.options, stylesOptions, {
> 128 | flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
| ^ 129 | });
130 | var
浏览 7提问于2018-12-28得票数 3
回答已采纳
我想给我的新React应用程序一个一致的外观和感觉使用Material-UI。此外，我希望样式和诸如此类的东西易于维护。因此，默认的主题似乎是一个很好的开端。由cssBaseline提供的Material-UI似乎检查了所有的框，所以我想试一试。问题是，惊喜，它不起作用。Css主题并不是我真正喜欢的东西。我是被误导了还是怎么了？下面的代码是我在App.js组件中实现的，没有任何进展(取自 )。我希望只是一个隐含的细节。
import React from "react";
import Footer from "./Footer";
import CssBase
浏览 0提问于2018-08-02得票数 12
回答已采纳
1回答
我正在创建一个简单的反应应用程序使用的材料-ui。我使用MuiThemeProvider和ThemeProvider作为主题。
App.js
import React from 'react';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import { CssBaseline } from '@material-ui/c
浏览 5提问于2020-03-25得票数 4
1回答
我试图使用打字机效果，以便编写一个文本行，然后在动画停止时显示一个按钮。
styles.css：
.welcome-msg {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /
浏览 1提问于2020-03-02得票数 1
回答已采纳
我正在尝试实现一个两列的布局，它们都是高度相等的，每个都占据了半个屏幕。图片能更好的解释它，。
不起作用的代码如下：
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import Grid from "@material-ui/core/Grid";
import Paper from "@mat
浏览 10提问于2020-03-01得票数 1
回答已采纳
有人能帮助我理解允许从单独的文件导入动态主题对象的正确语法吗？
我正在尝试从媒体查询中获取系统主题，然后动态设置主题。
如果我将所有内容都保留在主应用程序函数中，就可以正常工作，如下所示：
但是在下面的例子中，我想把它分解成不同的文件来组织，但是我的尝试失败了，我得到了错误：themeProvider_js_1.default is not a function
坏掉的例子：
这是重构的第二次尝试，没有错误，我可以在控制台日志中看到ThemeObject，但没有应用系统主题：
未来的代码:工作代码，但我想重构它，这样主题和媒体查询对象就在App组件之外：
import React from &
浏览 2提问于2020-06-21得票数 3
1回答
我已经创建了一个SignIn组件using Material UI's example。 import React from 'react';
import PropTypes from 'prop-types';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline
浏览 20提问于2019-03-14得票数 1
回答已采纳
3回答
我就是想不通。我想用Switch改变背景，但它只在第一次起作用，不能在随后的点击中起作用。下面是代码沙箱： https://codesandbox.io/s/strange-shaw-2tfk5 有人能告诉我这是怎么回事吗？我在React中使用Material UI 最小可重现示例:这是我的应用程序组件 import React from "react";
import { useState } from "react";
import { ThemeProvider, createTheme } from "@material-ui/core/sty
浏览 51提问于2021-07-15得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
