`className` prop和新的MUI系统实用程序`sx` prop之间的区别？
className prop和新的MUI系统实用程序sx prop是在使用MUI（Material-UI）框架中设置组件样式的两种不同方法。
classNameprop是传统的HTML属性，用于指定一个或多个CSS类名，从而应用预定义的或自定义的样式规则。通过使用classNameprop，可以通过在样式表中定义对应的CSS类名来实现对组件的样式定制。例如：
<Button className="custom-button">Click me</Button>在上述示例中，custom-button是一个自定义的CSS类名，通过为该类名定义样式规则，可以改变按钮的外观。
- 新的MUI系统实用程序
sxprop是Material-UI 5中引入的一种样式解决方案。它采用了一种类似于行内样式的写法，以JavaScript对象的形式直接传递给组件。使用sxprop，可以更直观地在组件上设置样式，并且可以使用一些类似于CSS的属性和值。例如：
<Button sx={{ backgroundColor: 'red' }}>Click me</Button>在上述示例中，通过sx prop将一个包含backgroundColor属性的对象传递给按钮组件，从而直接改变按钮的背景颜色为红色。
区别：
- 语法差异：
classNameprop需要传递一个字符串作为值，而sxprop需要传递一个包含样式属性的对象作为值。 - 功能差异：
classNameprop仅仅是将指定的CSS类名应用到组件上，而sxprop提供了更灵活的样式设置方式，可以直接在组件上使用类似于CSS的属性和值。 - 类名冲突：使用
classNameprop时，如果多个组件使用了相同的CSS类名，可能会发生类名冲突的问题。而使用sxprop时，由于样式是通过JavaScript对象传递的，因此可以更好地避免类名冲突。 - 拓展性：使用
classNameprop时，如果需要增加新的样式规则，需要在CSS样式表中添加对应的类名和样式规则。而使用sxprop时，可以直接在组件上添加新的样式属性，使得样式的拓展更加方便。
总之，className prop是一种传统的设置样式的方式，而sx prop是Material-UI 5引入的一种更直观、更灵活的样式解决方案。对于新的项目或使用Material-UI 5的项目，推荐使用sx prop来设置组件样式。相关的MUI系统实用程序sx prop的详细信息可以参考腾讯云提供的Material-UI官方文档：MUI - System。
相关·内容
**我使用的是反应路由器(v6)的最新版本，在这里，我从标题组件中的导航栏导航到其他页面。主要的问题是，当我在一个特定的页面上时，我如何去其他的页面(路线)。就像我在游戏页面上，我必须移动到职业页面，然后路径异常发生，所以每次我不得不去其他页面，首先我们必须移动主页，然后我们必须在另一个页面上再次移动。这是我的heroku部署的reactjs应用程序链接: plomx.herokuapp.com
&&这是我的app.js代码
import './App.css';
import Games from './Games'
import GetYou
浏览 12提问于2022-02-02得票数 1
回答已采纳
我已经制作了标题组件与网格有路由链接，我只是希望这个网格是响应在移动屏幕上应用的材料UI断点。这意味着，与其通过将网格项包装在下面来显示所有网格项，不如在移动屏幕上显示这2项。谢谢
**这是我的header.js文件代码：**
import React from 'react'
import './Header.css'
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import { AppBar } from
浏览 5提问于2022-02-02得票数 0
回答已采纳
我正在努力掌握MUI 5中的样式变化。我有一些样式在Material UI 4中工作得很好，但是当我试图在MUI 5中应用相同的样式时，我的web检查器将其显示为一个对象，而不是与sx一起使用时的CSS类名。 例如，我在下面创建了测试用例，唯一可以正常工作的样式是带有样式属性的“myBorder”。sx不工作。新手，有没有人能解释一下我做错了什么？ import * as React from "react";
const styles = {
myBackground: {
backgroundColor: "red"
},
myBor
浏览 216提问于2021-11-23得票数 2
MUI组件中的样式和sx支柱也做了同样的事情。sx支柱提供了一些简短的语法，并允许您访问主题对象。但除此之外，他们似乎是一样的。你什么时候该用一种而另一种？
浏览 7提问于2022-06-07得票数 6
我试图建立一个嵌套网格，它有两个div，一个在左边，另一个在右边，在左边的div中，我想要一个网格系统，在那里我想添加自定义的行间距，但是没有添加任何与行间距有关的内容，MUI给了我行间距，什么会导致这个问题呢？
import React from 'react'
// MUI
import Box from '@mui/material/Box'
import Container from '@mui/material/Container'
import Grid from '@mui/material/Grid'
impo
浏览 7提问于2022-05-02得票数 1
回答已采纳
1回答
我创建了一个组件DateTimePicker (可以是DatePicker)，我制作了youtube视频中推荐的所有安装，以及这个站点。经过一天半的尝试，我需要你的帮助。我去不了了。因此，下面遵循我的代码，如果您可以在一个分离的组件，以用于其他形式，我会欣赏。提前谢谢。
// Bancos component (means Banks)
// if I don't comment the lines commented bellow, the form does not render and breaks the app.
import React, { useState } f
浏览 6提问于2022-06-13得票数 0
1回答
因此，我希望当用户单击按钮时，能够创建我创建的新CatagoryField组件。当我将组件放在一个函数中并调用它时，它只会创建该组件一次。我会感谢你的帮助。我不知道该如何实现这一点？
App组件
import React, { useState } from "react";
import {
Accordion,
AccordionSummary,
Chip,
Button,
IconButton,
Autocomplete,
TextField,
} from "@mui/material";
import { Grid } fr
浏览 3提问于2022-06-01得票数 0
回答已采纳
单击时标签消失，大部分代码来自material-ui docs.Here我正在使用material-UI5。我不明白为什么代码会这样。样式也来自material ui 5。这是一个简单的导航栏，有5个选项卡 从‘react’导入React，{ useState }；从‘@mui/material’导入{ AppBar，Toolbar，Tabs，Tab，useScrollTrigger，Box，Button }；从‘@mui/material/ styled’导入{styled}；从‘../../assets/logo.svg’导入徽标； const ElevationScroll =道具{
浏览 33提问于2021-09-26得票数 2
我正在创建我的网站，我试图添加字体到文本。我尝试将Google字体的链接添加到我的Index.HTML文件的head标记中，并将字体系列添加到index.css中。在此之后，我尝试在我的网站的样式表中创建一个css类，并在类中添加字体。然后将类调用到mui按钮组件中的主网页文件。我不知道为什么没有将特定的字体应用于文本。如果有人能帮忙，那就太好了。
<Stack direction='row' spacing={1}>
<div className='App-logo'>
<img src={Archit
浏览 4提问于2022-08-17得票数 0
1回答
我有一份带有持久抽屉的申请。抽屉中包含连接到其他各种组件的线路。
通常，抽屉本身工作正常，但当抽屉打开或关闭时，加载的组件不会调整大小。
在mui上的示例中，这个功能是在样式的主组件中实现的。意味着内容与抽屉位于同一个组件中。这在我的应用程序中是不同的，在我的应用程序中，我有一个包含路径的索引文件，一个带有抽屉的导航条文件，以及其他包含它们各自文件的组件。
那么，如何使用加载的组件实现这个调整大小呢？
index.tsx
import React from "react";
import ReactDOM from "react-dom";
import { B
浏览 1提问于2021-11-05得票数 1
2回答
import * as React from "react";
import Box from "@mui/material/Box";
import Slider from "@mui/material/Slider";
function valuetext(value) {
return `${value}°C`;
}
export default function RangeSlider() {
const [value, setValue] = React.useState([20, 37]);
const handle
浏览 8提问于2021-12-31得票数 1
回答已采纳
我正在尝试在React中使用MUI的Drawer组件构建一个响应式侧边抽屉。我使用的是MUI版本4.12.1。 在mui.com example上，它们使用sx属性并传入一个对象，并将其显示设置为一些不同的屏幕宽度依赖值。 但是，当我在App.js文件中使用以下代码时： <Drawer
variant="permanent"
sx={{
display: { xs: 'none', sm: 'none' },
}}
open
>
Hello There
</Drawer> 抽屉仍然出现。当我简
浏览 49提问于2021-10-01得票数 2
回答已采纳
我正在使用makeStyles，createStyles钩子在这里风格我的MUI5反应应用程序。在下面的代码中，样式被完美地应用于根className，而不是应用于logoIcon。已经有一段时间没能调试这个问题了
import { AppBar, Toolbar } from "@mui/material";
import PetsIcon from "@mui/icons-material/Pets";
import { createStyles, makeStyles } from "@mui/styles";
const useSt
浏览 3提问于2022-09-15得票数 0
在这里，我想传递从选择菜单中的值，一旦我选择了值为1的菜单，它必须只显示一个对象数组，但是当我选择菜单4时，它必须显示4个对象数组，或者是我所拥有的相同字段的4倍，所以请帮助我解决这个问题，所有这些都是一个组件。
import React from 'react'
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import InputLabel from '@mui/material/InputLabel
浏览 1提问于2022-07-08得票数 1
回答已采纳
我第一次在TypeScript中使用MUI，在新的sx属性上遇到错误。看看下面关于Typescript显示的错误的屏幕截图。 ? 有趣的是，我只在TabPanel组件上得到这个错误，因为我在其他MUI组件上使用过它，没有任何问题。下面是我的代码 /* eslint-disable react/require-default-props */
import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab
浏览 19提问于2021-10-26得票数 3
回答已采纳
我上周得到了帮助，我有50%的工作，选择组件的材料，V.5.0和反应18.0。Select与map函数一起正常工作。问题是所选的项目不会显示，也不会保持选中。此外，的大小不接受宽度格式。我尝试过，Box和sx={}，但它们都没有起作用。请大家帮忙，我们将不胜感激。
// Select is down bellow almost at the end. Above the button.
import React, { useState } from 'react';
import { Container } from '@mui/material';
im
浏览 3提问于2022-06-06得票数 1
回答已采纳
1回答
我用的是MUI材料。
我得到了一个
它在页面的顶部，右边，左边有一个填充。
我希望应用程序栏在最上面的页面。我试过使用类，但它不起作用。
组件/AppBar/index.js
import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from
浏览 3提问于2022-07-14得票数 0
回答已采纳
我已经为我正在进行的一个项目创建了一个音乐播放器组件，但我似乎无法让它播放我正在传递的一系列歌曲。
当我将来自同一个组件的mp3文件传递给它时，它工作得很好，但是现在它不能工作了，因为我将它作为一个对象传递。我想当我收到道具的时候，我可能是在破坏它。
任何帮助都是非常感谢的！
import React from 'react'
//Components
import MusicPlayer from '../components/MusicPlayer';
//Song Images
import Drake from '../images/D
浏览 10提问于2022-09-24得票数 0
我正试图在我的应用程序栏中向右移动一个按钮。如下所示：
我尝试了两种方法来解决这个问题：
return (
<AppBar
position="sticky">
<Toolbar
sx = {{background:'black', float:'right'}}
variant="dense">
<CustomButto
浏览 7提问于2022-02-06得票数 1
回答已采纳
我现在有资料-ui TextField元素和它的样式：
import TextField from "@mui/material/TextField";
const inputStyle = {
fontSize: 24,
pl: 2,
pt: 0.5,
pb: 0.5,
};
<TextField
variant="outlined"
inputProps={{
sx: inputStyle,
}}
/>
现在，我想用样式组件来制作一个组件：
import { styled } from "@mui/m
浏览 5提问于2022-05-09得票数 1
1回答
我读过一些类似问题的答案，但没有完全理解，因为materialUI更新了@mui/样式。
根据mui文档，我们可以使用sx支柱创建自定义样式，例如
<Typography variant="h5" sx={{backgroundColor: 'red' }}>Header</Typography>
但是，当我在v5中使用常规的v5时，它也运行得很好：
//css
.makeRed {
backgroundColor: red
}
// jsx
<Typography variant="h5" classNam
浏览 6提问于2021-12-12得票数 1
回答已采纳
2回答
出于某种原因，它不尊重background: 'linear-gradient(to right, blue.200, blue.700)'在makeStyles下。为什么会这样呢？我所要做的就是在整个空间上设置一个渐变背景。<Container className={classes.root}>可能应该是div，你觉得呢？
import { useState, useEffect } from 'react';
import type { NextPage } from 'next';
import Container from &
浏览 9提问于2022-03-27得票数 0
回答已采纳
我试图在next.js中创建一个表单，其中包含来自material的复选框，并根据用户输入使用不同数量的选择框，但当我在选中框内更改值时，它不会更新显示的文本，只有在添加另一对复选框时才会这样做。这是我的密码：
import {
ChangeEventHandler,
ReactElement,
useContext,
useEffect,
useState,
} from "react";
import { NextPageWithLayout } from "../../../utils/types";
import styles fro
浏览 2提问于2022-11-26得票数 0
回答已采纳
我正在尝试让这个图标更接近文本，但我不太确定如何做到这一点。 当我进入开发者模式时，它向我显示了这一点。 ? 我不知道紫色的东西是什么意思。我的最终目标是尝试将图标移动到"Steve First“框的右上角，但我不确定如何做到这一点。这是我构建列表的代码。 <List style={{ display: "flex", flexDirection: "row", padding: 0 }}>
<ListItem
className={classes.removePerson}
secondaryAction={
浏览 20提问于2021-11-22得票数 0
我很难有一个select组件来删除(巴西的)州列表，在那里我可以在应用程序中使用几种形式(客户端、供应商等)。因此，我分别创建了一个Select，我希望在我的Bank表单中使用这个"Select“组件来选择银行所在的状态(位置)。我得到了一个错误的映射函数，在选择组件，而且，表单库崩溃，我不知道如何正确地使用数组的选择在银行表单。在银行表格中导入什么和如何处理？，我将感谢所有的帮助收到。我使用的材料-ui 5.0和反应18.0和Linux Ubunto 20.04。
// Bank form
// Select is at 3/4 down bellow
import { Con
浏览 5提问于2022-06-04得票数 0
回答已采纳
2回答
即使在刷新页面之后，我还需要在代码中添加什么才能保留复选框呢？下面是项目的完整代码：，请提供代码示例或解释。
如果您需要我添加代码的任何其他部分，请告诉我
import React from "react";
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardContent from '@mui/material/CardContent';
import { FormContr
浏览 12提问于2022-08-26得票数 3
2回答
我正在尝试将MUI自定义为导入makeStyles。
import { makeStyles } from '@mui/styles';
当尝试安装npm install @mui/styles时，我会得到这个错误
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: note-app-material-ui@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modu
浏览 22提问于2022-04-08得票数 2
回答已采纳
1回答
我正在制作一个todo应用程序，在那里我可以添加新的评论已经存在的待办事项。问题是，当我键入一个新的注释时，所有其他输入字段都会显示相同的输入，用于新的todo注释。我知道这样做是因为我将输入字段的值设置为具有相同的状态值。
const [inputComment, setInputComment] = useState('');
以下是todo组件的新注释部分的代码
<Box sx={{ marginTop: "10px", display: "flex", alignItems: "center", justifyCo
浏览 7提问于2022-07-19得票数 0
我在调试这个问题时遇到了很多困难，因为它只会在我运行'npm‘之后立即发生，在执行一个页面刷新之后，一切都会出现在正确的位置，就好像根本没有问题一样.
在我的应用程序的顶部栏上有三个浮动按钮，我已经设置了相对位置，以便它们被稍微向下移动以重叠工作区域。
在执行页面刷新后，它们将显示在最佳位置。以及相对于抽屉的位置变化(左或右)，该抽屉可能是打开的，也可能不是打开的和屏幕上的。
有人知道只在第一页加载时会导致这个问题的原因吗？
我尝试过绝对定位，即在第一次加载时设置页面最左边的所有浮动按钮，但刷新后设置正确的位置。
我很想知道是什么原因导致页面在第一次加载时以奇怪的位置呈现这些按钮，如果
浏览 4提问于2022-01-16得票数 0
我正在学习资料-ui v5和它是一个新的造型系统，使用sx，我如何设置一堆不同的元素在同一条线上有相同的高度？
<Mui.Box m={2}
component="form"
sx={12}
md={12}
noValidate
autoComplete="off"
>
<Mui.Card variant="outlined" raised sx={{ p: 2 }}>
<Mui.Grid container
spac
浏览 2提问于2021-11-02得票数 1
回答已采纳
1回答
如何显示消息而不是空数组
、、、
我的应用程序有两个按钮，一个显示信息，另一个隐藏信息。但是，从API加载的一些图像没有任何可用的数据，当按下显示信息的按钮时，它返回一个[]
我将如何针对那些加载了一个空数组，并添加一个字符串。例如，“没有关于这个品种的信息？”
App.js
import './App.css';
import './Dog.js';
import './index.css';
import "./Grid.js";
import NestedGrid from './Grid.js';
import Album from
浏览 17提问于2022-02-26得票数 0
回答已采纳
1回答
使用组件MUI链接，我的页面将重新加载。所以我使用了Reactive路由-dom中的Link组件，但是结果是<.a>在另一个内部，并且控制台上有错误。
如果我移除MUI.Link，那么导航条看起来很糟糕
代码：
import {Link as LinkRouter} from "react-router-dom"
import Link from "@mui/material/Link";
export default function Navbar() {
return (
<>
浏览 3提问于2022-09-11得票数 0
回答已采纳
1回答
我已经把MUI从v4升级到了v5。然而，我现在很难理解主题如何与可用的不同主题解决方案一起工作。我真的不知道在哪里使用MUI主题/样式组件，以及何时使用情感组件。 在新的组件中，我使用sx属性来应用样式，但是我有相当多的组件仍然使用createStyles/useStyles函数。 我目前有以下设置： import {
ThemeProvider as MuiThemeProvider,
Theme,
StyledEngineProvider,
createTheme,
} from "@mui/material/styles";
import { Theme
浏览 15提问于2021-10-19得票数 2
回答已采纳
我希望按照正式文档中的示例创建一个使用MUI警报的定制的MUI ，但是ESlint向我展示了这个错误：
error Unexpected function expression prefer-arrow-callback
error Prop spreading is forbidden react/jsx-props-no-spreading
在守则的这一部分：
const Alert = React.forwardRef(function Alert(props, ref) {
return <MuiAlert elevation={6} ref={ref} var
浏览 9提问于2022-02-01得票数 0
回答已采纳
我使用的应用程序栏与响应菜单模板，从材料用户界面。模板带有一个原始徽标，它是MUI图标之一。我需要将这个MUI图标(代码中的AdbIcon)替换为我的实际徽标..png/..jpg文件。
但这是之前和之后的。
在此之前：
之后：
当屏幕变小时，如何将徽标移动到导航栏的中心，以使站点更有响应性？
我做了一些小的修改，这是我的代码。
import { useState } from "react";
import { Fragment } from "react";
import { Outlet, Link } from "react
浏览 15提问于2022-10-23得票数 0
回答已采纳
我使用资料界面抽屉来隐藏/显示屏幕右侧的内容。当抽屉打开时，它应该缩小右边的内容(不重叠)。我正在从一个变量中设置抽屉宽度值，它工作得很好。但是，我需要用它的子组件的任何宽度值替换该变量的值。
这是带有抽屉组件的代码：
import { useState } from "react";
// Material UI components
import { Box, Button, Drawer, Divider, Grid, IconButton } from "@mui/material";
// Components
import Dashboard
浏览 4提问于2022-08-30得票数 0
目标:当断点在平板和以下时隐藏navMenu，所以我可以用汉堡包菜单代替
在VS代码的终端中，它说编译成功，但在浏览器中我看到：
TypeError:无法读取未定义的属性(读取'down')
我试过这里的说明：，没有运气。
有人能给我指明正确的方向吗？
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typogra
浏览 3提问于2021-11-13得票数 3
回答已采纳
1回答
使用MUI有两个彼此相邻的独立网格，每个网格占较大网格的50%。 如下图所示，我很难匹配这两个部分的高度。我希望较小的网格项(卡片)动态填充左侧部分的高度，并匹配右侧部分的高度。 使用Mui怎么可能做到这一点？ 下面是我当前的代码： import React from "react";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import C
浏览 21提问于2021-10-22得票数 1
回答已采纳
我有问题的MUI，我试图给我的按钮，我尝试了两种方式，但没有发挥作用。
例1
import React from 'react'
import { Typography } from '@mui/material'
import Button from '@mui/material/Button'
import Container from '@mui/material/Container'
import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
浏览 13提问于2022-07-23得票数 1
我有我的单选按钮和复选框的材料用户界面，他们的工作，如预期的。存储的数据是正确的状态和本地存储，也是正确的持久化数据。我有一个多步表单，我的问题是，当我选择单选按钮或复选框并移动到下一页，然后返回时，我的选择会出现“未选中”，就像未选中复选框和未填充所选单选按钮一样，即使这些复选框和数据被正确地存储在状态和本地存储中，这些选择仍然存在。如何使所选内容正确地呈现给用户？
以下是单选按钮页面之一：
import React, { useContext, useEffect, useState } from "react";
import { Global } from ".
浏览 4提问于2022-02-23得票数 0
我有一个音乐播放器，它可以播放一系列的歌曲，并使用控制面板(prev，play，暂停，next)循环它们。
歌曲的所有音频文件都存储在状态变量中，然后在使用useRef钩子引用的音频标记中调用该变量。所有的功能，并连接到控制面板，其中播放时，我点击播放按钮。
我想添加的功能，播放歌曲时，它点击要么点击图像，或通过添加一个播放按钮在图像顶部。现在，歌曲将只通过单击播放按钮来播放，这不允许我单击单个歌曲。我该如何处理这个问题？
我正在考虑让'play‘按钮成为它自己的组件，这样我就可以用它来完成这个任务了。
我已经张贴了音乐文件和音乐播放器的组成部分。我仍然是非常新的反应，所以我的代码可能
浏览 9提问于2022-10-05得票数 1
2回答
在v5中，尝试创建一个从黑暗模式切换到光模式的Toggle是相当困难的。
通过直接使用MUI 中的代码，我试图将代码分离出来，以便在app.js和my Navbarpractice.js中工作。
App.js
import React from "react";
import useMediaQuery from '@mui/material/useMediaQuery';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseli
浏览 31提问于2022-02-12得票数 0
回答已采纳
3回答
我试图给deleteIcon of Chip组件(MUI v5)自定义颜色。正如我所看到的，我的样式被.css-inlzrk-MuiButtonBase-root-MuiChip-root .MuiChip-deleteIcon覆盖，但是我不能覆盖它。我不想给出内联风格。<Cancel style={{color: 'blue'}} />)。
import * as React from "react";
import Chip from "@mui/material/Chip";
import Stack fro
浏览 7提问于2021-11-01得票数 4
回答已采纳
import * as React from 'react';
import { styled } from '@mui/system';
const MyComponent = styled('div')({
color: 'darkslategray',
backgroundColor: 'aliceblue',
padding: 8,
borderRadius: 4,
});
export default function BasicUsage() {
return <MyCom
浏览 3提问于2022-09-12得票数 0
回答已采纳
1回答
我使用的是MUI和Gatsby v5。我希望在整个应用程序中保持样式语法的一致性，所以我尝试在GatsbyImage中添加sx属性。 这是我尝试过的： <Box
component={GatsbyImage}
sx={/* my sx styles */}
/> 这就是我想要的。然而，我注意到sx属性不知何故被传递给了img。这最终在我的超文本标记语言中获得了一个<img sx=[object Object]/>。 虽然这对我的应用程序没有任何影响，但我想知道有没有更好的方法来实现这一点？
浏览 46提问于2021-10-19得票数 2
我尝试了资料用户界面，我想不出如何在右边点上按钮(
import * as React from "react";
import SvgIcon from "@mui/material/SvgIcon";
import Button from "@mui/material/Button";
import { AppBar, IconButton, Toolbar, Typography } from "@mui/material";
import { Box, Container } from "@mui/system&#
浏览 4提问于2022-11-07得票数 0
回答已采纳
我想使用className属性来设计mui图标，但是它不起作用。但是，当我应用内联样式时，它就像预期的那样工作。组件中有一些图标，我想以相同的方式设计，这就是为什么我不想使用内联样式并多次复制相同的代码。我做错了什么？有人能帮忙吗？
import React from 'react';
import FacebookIcon from '@mui/icons-material/Facebook';
import TwitterIcon from '@mui/icons-material/Twitter';
import { makeStyles
浏览 11提问于2022-01-01得票数 1
回答已采纳
我的App.js中有一个更改主题的函数(光/暗模式)：
import { createTheme, ThemeProvider } from '@mui/material/styles'
import Button from '@mui/material/Button'
import Header from './components/Header'
import About from './pages/About'
import Imoveis from './pages/Imoveis'
import Cont
浏览 4提问于2022-09-23得票数 0
我想减少我的代码，但不知道怎么做。
前三个复选框将启用按钮(因此我需要验证)，最后两个复选框数据将发送到父组件。
如何将const [checkValue1, setCheckValue1] = useState(false); x 5简化为1，以便使用onChange来验证true/false数据。是否可以.map复选框？
thx
import React from "react";
import { Checkbox } from "@mui/material";
import { green } from "@mui/material/colors
浏览 9提问于2022-08-25得票数 0
回答已采纳
我试着下载
npm install @mui/material @emotion/react @emotion/styled --force
之后
npm install @material-ui/icons
npm install @material-ui/core
所有的一切都不起作用我只犯了错误
我的Appbar代码很简单，来自ui材料。
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/materia
浏览 13提问于2022-07-19得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
