设置material-ui文档部分样式的正确方法
设置 material-ui 文档部分样式的正确方法是通过使用内联样式或者 CSS 类来实现。以下是两种常用的方法：
- 内联样式：
内联样式是将样式直接应用于组件的属性中。在 material-ui 中，可以使用
style属性来设置内联样式。例如，要设置一个按钮的背景颜色为蓝色，可以使用以下代码： - 内联样式：
内联样式是将样式直接应用于组件的属性中。在 material-ui 中，可以使用
style属性来设置内联样式。例如，要设置一个按钮的背景颜色为蓝色，可以使用以下代码： - 在上述代码中，我们定义了一个
buttonStyle对象，其中包含了要应用的样式。然后，将该对象作为style属性传递给Button组件。 - CSS 类：
另一种设置样式的方法是使用 CSS 类。在 material-ui 中，可以使用
makeStyles或withStyles函数来创建自定义的 CSS 类。以下是使用makeStyles的示例： - CSS 类：
另一种设置样式的方法是使用 CSS 类。在 material-ui 中，可以使用
makeStyles或withStyles函数来创建自定义的 CSS 类。以下是使用makeStyles的示例： - 在上述代码中，我们使用
makeStyles创建了一个名为button的 CSS 类，并将其应用于Button组件。通过className属性将 CSS 类名传递给组件。
这些方法可以根据需要设置 material-ui 组件的样式。请注意，这只是设置样式的基本方法，具体的样式属性和值可以根据实际需求进行调整。
相关·内容
我刚刚开始学习资料UI in react js。
当涉及到自定义样式时，我遇到了一个问题，在这个问题上，一切似乎都是逻辑上正确的，但样式并不适用。
在Create.js组件中有一个按钮，我试图在import { makeStyles } from "@material-ui/styles"的帮助下更改它的样式
这些是安装在package.json中的依赖项
"dependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^
浏览 6提问于2021-10-04得票数 1
2回答
自定义材料设计数据表复选框
、、、、
我刚开始在ReactJS中使用material-ui设计。我正在努力更改显示在<TableRow />组件下的复选框样式。()
我已经尝试过使用css设置复选框的样式。它看起来像material-ui有自己的复选框逻辑，使用div和svg并隐藏原生checkbox元素，将不透明度设置为0。
你知道怎样才能实现吗？
浏览 1提问于2016-11-22得票数 0
最近，我一直在尝试material-ui，并且遇到了一些关于如何设置组件样式的问题。尽管大多数material-ui样式设计方法都非常直观且易于理解，但它可能会让人感到有点困惑，因为有这么多方法来设计组件的样式。此外，似乎在某些情况下，只有一种方法是正确的，并且通过反复试验或在stackoverflow上发布问题来判断哪种方法是正确的，这是乏味的。 就像我在问题How to set the zIndex on the drawer component中所问的，设置组件的z索引的唯一方法是使用style props通过内联样式。由于material-ui似乎正在使用内联样式设置抽屉组件的样式。
浏览 30提问于2020-09-13得票数 1
回答已采纳
我开始使用材料- use (分支下一个又名v1)作为ReactJS网络应用程序。在设置放置在AppBar中的排版组件的默认颜色和预期颜色时，我发现了一些困难。
我已经定义了这个，通过选择靛蓝作为主颜色，文本主颜色自动设置为白色(#ffffff)。这也得到证实，看看靛蓝调色板从官方。
然而，默认的颜色却是黑色。如果我将color属性设置为default，它仍然是黑色的，使其工作的唯一方法是将其设置为inherit。
我为什么要这么做？我是不是遗漏了什么？
我有一个主题，可以定制text属性。这是正确的轨道吗？如果是的话，我如何使用text.primary例如，因为的排版只能接受为值default
浏览 4提问于2017-12-28得票数 0
1回答
如何在样式中使用同级选择器css
、、、、
我有一个样式化的组件，它看起来像： import styled from 'styled-components';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
export const CategoryList = styled(List)`
`;
//this is
浏览 13提问于2020-01-16得票数 1
回答已采纳
我正在尝试得到一个如下所示的结果(图片来自)：
我不希望选项卡占据页面宽度的100%，因为material-ui是默认的。通过material-ui的实现可以做到这一点吗？我已经使用style标签属性调整了每个标签的宽度，但墨迹似乎硬编码为根据所选标签的id使用百分比，因此没有正确地为调整大小的标签加下划线。有解决办法吗？
浏览 3提问于2016-06-21得票数 9
回答已采纳
2回答
我正在尝试将CloseIcon与flex-end对齐，这样它就能正确地浮动，但无法找到应用该样式的位置。
import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List
浏览 5提问于2020-07-13得票数 1
回答已采纳
有没有办法将material-ui组件的AppBar属性更改为透明，而不必实际更改CSS？
我尝试过不透明度属性，但它似乎降低了组件中所有内容的不透明度。
下面是一个例子，我的意思是在Stripe的网站。
浏览 0提问于2018-05-01得票数 19
回答已采纳
在我的react应用程序中，我使用了Material-UI增强型表格，它是基于react-table的，我想改变它们的行的样式。 组件类中的文档读取(https://material-ui.com/api/table-row/)应该使用属性“TableRow”来更改样式，但在MaterialUi代码中，属性是这样读取的： <TableRow {...row.getRowProps()}> 我的问题是，如果TableRow属性是自动添加的，我如何使用属性类？我想我需要这个： <TableRow classes="rowStyle "> 其中，row
浏览 87提问于2020-07-09得票数 0
回答已采纳
2回答
我想在MUI v5中将样式与组件文件分开。我在v4中的方法是这样使用makeStyles：
Page.style.js
import { makeStyles } from "@material-ui/core";
export const useStyles = makeStyles({
root: {
background: "white",
},
});
Page.js
import React from "react";
import useStyles from "./Page.style";
con
浏览 4提问于2021-10-13得票数 2
我正在尝试覆盖Material-UI TreeView组件中所选TreeItem的样式。根据CSS API文档，有一个selected选择器，但当我使用它时，我看到的是整个子树的样式，而不仅仅是所选的项。什么是正确的选择器，用来只设置所选树项目的样式？ 代码沙盒：https://codesandbox.io/s/nostalgic-flower-e85cd?file=/src/App.js import React from "react";
import { makeStyles } from "@material-ui/core/styles";
impo
浏览 30提问于2020-06-29得票数 3
回答已采纳
我有一个样式，我申请的ActionSearch图标，但不幸的是，它没有得到通过。
我不知道我能为这个问题写更多的东西，我认为它很简单，但是当纸张得到样式时，图标组件就没有了。
知道为什么会这样吗？
import React from 'react';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import IconButton from 'material-ui/IconButton';
import
浏览 2提问于2017-04-15得票数 1
回答已采纳
2回答
DOCS:
“在项目的根目录中创建一个.babelrc.js文件：
const plugins = [
[
'babel-plugin-transform-imports',
{
'@material-ui/core': {
// Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
'transform': '@
浏览 2提问于2021-07-24得票数 6
1回答
我试图准确地跟踪这里记录的内容：
import React from "react";
import { withTheme } from "@material-ui/core/styles";
import styled from "styled-components";
const StyledDiv = withTheme(styled.div`
background: ${props => props.theme.palette.primary.main};
color: ${props => props.them
浏览 5提问于2020-10-14得票数 1
我在Material UI库中使用了以下样式来增加ListItem文本的fontWeight，但不幸的是，它不能像预期的那样工作。 以下是代码 import {
IconButton,
Collapse,
List,
ListItem, ListItemIcon,
ListItemText,
makeStyles,
useTheme
} from '@material-ui/core';
......
const useNavStyles = makeStyles((theme) => ({
navLinkItem: {
浏览 17提问于2021-07-04得票数 0
回答已采纳
我有一个material-ui TextField的组件，带有一些定制。在这个codesandbox中就是一个例子。 问题是当我在TextField的InputLabelProps中传递shrink: true时。该组件将覆盖指定的最大宽度。如下所示： ? 宽度应该类似于浅蓝色部分。绿色的元素是缩小的标签。 当shrink: false没有问题时，组件保持正确的宽度。 我曾尝试在组件中的多个元素上设置max-width，但都没有起作用，我搜索了一下，但找不到任何关于这个特定问题的信息。有没有人能给我指个方向，把这个max-width强制到正确的元素上？
浏览 19提问于2021-10-01得票数 0
回答已采纳
4回答
全宽材料-徽章中的ui按钮？
、、、、
我在网格中有一个按钮，并使用fullWidth将其展开以填充容器。
这很好用，直到我把它包在一个徽章里。现在fullWidth属性被忽略，按钮的宽度为默认宽度。
工作正常：
<Button variant={"outlined"} color={"secondary"} fullWidth>
Todo
</Button>
现在不起作用：
<Badge badgeContent={4} color={"secondary"}>
<Button variant={"outlined&#
浏览 0提问于2018-09-15得票数 2
我是materialUI的新手。这就是我如何使用一个简单的输入域，它被勾勒出来并有一个图标。但由于我的背景是深色的，我需要图标的颜色，边框和文本颜色为较浅的颜色，例如灰色。 materialUI有什么方法可以做到这一点？ import Input from '@material-ui/core/OutlinedInput'
import InputAdornment from '@material-ui/core/InputAdornment'
import AccountCircle from '@material-ui/icons/AccountC
浏览 31提问于2020-05-02得票数 0
回答已采纳
7回答
我正在尝试将Formik与Material-UI文本字段一起使用。如下所示： import TextField from '@material-ui/core/TextField';
import {
Field,
FieldProps,
Form,
Formik,
FormikErrors,
FormikProps
} from 'formik';
import React, { Component } from 'react';
interface IMyFormValues {
firstName: stri
浏览 152提问于2018-08-31得票数 24
回答已采纳
1回答
我有一个使用ReactJ& Material创建的表，如下所示。
她的现场测试：
我想减少列之间的空间，在第一列之后总是有很大的空间，不管我在它后面添加了多少列。就像他们有一些“间隔”风格，但不能删除它。
有小费吗？谢谢
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@m
浏览 2提问于2020-05-11得票数 2
回答已采纳
3回答
我在theme.ts中为material-ui定义了原始主题
import {Colors, Spacing} from 'material-ui/lib/styles/';
import {ColorManipulator} from 'material-ui/lib/utils/';
import {Styles} from 'material-ui';
export default <Styles.RawTheme> {
spacing: Spacing,
fontFamily: 'Roboto, sa
浏览 1提问于2016-02-26得票数 8
回答已采纳
我正在尝试把Radium和Material-ui结合起来。当我尝试在一个Material-ui组件上应用多个样式时，没有应用任何样式。因此，例如，类似这样的代码不会产生任何应用的样式：
<MenuItem style={[styles.styleOne, styles.styleTwo]} >
当然，如果我这样做：
<MenuItem style={Object.assign({}, styles.styleOne, styles.styleTwo)} >
它起作用了。有什么方法可以绕过它吗?或者这是使用Radium为Material-ui组件组合样式的唯一方法？顺便提
浏览 0提问于2016-06-15得票数 7
2回答
我正在使用镭库内嵌样式在反应。使用它可以很好地用于其他组件，但我有材料-UI组件的问题。当我把鼠标悬停在纸上时，它不会将颜色改变为绿色。这里怎么了？我该怎么解决这个问题？
import React, { Component, Fragment } from 'react';
import { Grid, GridList, Paper, ListItem, List, ListItemIcon, ListItemText } from '@material-ui/core';
import { connect } from 'react-redux
浏览 0提问于2018-12-18得票数 1
回答已采纳
我有以下测试代码(遵循Material UI typescript文档中的指南)
import * as React from 'react';
import { Theme } from '@material-ui/core/styles/createMuiTheme';
import { WithStyles } from '@material-ui/core';
import { createStyles } from '@material-ui/core/styles';
import Drawer from '
浏览 0提问于2018-06-21得票数 2
1回答
我可以使用@material-ui/icons svg图像作为其他元素的背景吗？尝试了下面的代码，但不起作用。
import CarIcon from '@material-ui/icons/DriveEtaRounded';
const carIcon = <CarIcon />
function Cover(){
return (
<div
className={classes.cover}
style={{ backgroundImage: 'url('+ carIcon+')
浏览 12提问于2020-05-26得票数 4
我无法在material-ui next中增加对话框宽度。它将水平滚动条添加到日志中。接下来有没有办法增加material-ui中日志的宽度？有谁能帮上忙吗？
浏览 1提问于2017-11-08得票数 44
回答已采纳
我学习了React，并希望在这样的对话框中显示xml：
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'
import Button from '@material-ui/core/Button';
import {
浏览 0提问于2019-08-14得票数 2
我正在制作一个CRUD应用程序，我想将'Create'控件显示为一个Fab按钮，该按钮附着在屏幕的右边，并且尽管屏幕滚动，我还是想要保持在这个位置。
最后，当屏幕滚动时，我可以使按钮保持不变，但我无法找到如何将其位置设置到屏幕的右下角。
这是我的组件的代码：
import React, { Component } from 'react';
import Cookies from 'js-cookie';
import axios from 'axios';
import PropTypes from 'prop-type
浏览 1提问于2019-01-27得票数 4
回答已采纳
如何对齐物料UI输入文本的文本？以下内容似乎不起作用。即时通信使用1.x版
import {Input} from 'material-ui';
//didn't work
<Input
className="max-w-128 inline-block"
style = {{textAlign: 'center'}}
id="input-quantity"
inputStyle={{ textAlign: 'center' }}
//tried hintStyle a
浏览 0提问于2018-06-16得票数 5
回答已采纳
我是新的反应，我正在使用材料-用户界面来完成事情。
我遇到的问题是，图标没有出现，即使按，它也应该工作：
每名医生
import Icon from '@material-ui/core/Icon';
...
<Icon className={classes.icon} color="action">
add_circle
</Icon>
我试图通过以下方式获取导航项目：
import React from 'react';
import { NavLink } from 'react-router-d
浏览 2提问于2018-07-26得票数 2
回答已采纳
我正在构建一个使用物质UI的表单，其中包含3个字段(1)、日期(2)、小时(3)注释。默认情况下，MUI日期选择器字段默认为今天的日期。因此，当我填充其余的字段(即小时和注释)并提交表单时，我不会在数据对象中看到日期值。相反，我必须显式地选择一个日历日期并提交，然后数据对象将填充日期选择器值。
在通过API调用将数据提交到数据库时，这给我造成了问题。有谁面临过这样的问题..？如何在此场景中正确捕获日期值。
下面是代码
import React, { useState } from "react";
import Grid from "@material-ui/core/
浏览 3提问于2021-07-20得票数 0
回答已采纳
我在一个react网站上工作，并尝试使用material-ui组件。我发现material-ui建议将styles放在组件的classes属性中。每个组件都可以使用className={...}获取样式。 ...
return (
<div className={classes.root}>
... 如果我选择使用material-ui，我必须遵循这个设计吗？或者我可以单独创建sass文件并将其导入到每个组件中？如果我这样做了，是不是违背了material-ui的设计？或者，我会错过任何material-ui特性吗？
浏览 20提问于2019-05-23得票数 0
未选择的切换按钮的样式工作得很好。
但是，当您不定义空类选择器时，所选切换按钮的样式不会出现：
./App.js
import * as React from "react";
import { render } from "react-dom";
import { createStyles, WithStyles } from "@material-ui/core";
import { ToggleButtonGroup, ToggleButton } from "@material-ui/lab";
import { wit
浏览 0提问于2019-07-11得票数 1
回答已采纳
我越来越沮丧，因为我花了几天时间试图将我的react应用程序从javascript迁移到tsx。到目前为止，我喜欢tsx的类型检查，但我不相信资料-ui库，因为它是解释如何使用它的风格与类型记录。
我遵循了这里的指南的文字，并创造了一个主题：
import { createMuiTheme } from "@material-ui/core/styles";
export default function theme() {
return createMuiTheme({
palette: {
primary: {
main: "#607D
浏览 16提问于2020-03-12得票数 0
回答已采纳
3回答
我使用快速拨号材料Ui组件，我想在工具提示中应用一些样式
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Backdrop from '@material-ui/core/Backdrop';
import SpeedDial from '@material-ui/lab/SpeedDial'
浏览 2提问于2020-08-29得票数 1
回答已采纳
我正在尝试在Material-ui中编辑表格，但我不想将其显示为卡片。我想删除整个表格周围的边框，但我在文档页面上找不到任何有关删除边框的内容。有人能帮我吗？ 有关组件的链接：https://material-ui.com/components/tables/#other 代码： import React from 'react';
import { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@mat
浏览 38提问于2020-07-13得票数 4
回答已采纳
3回答
是否可以从Material-UI标题中设置AppBar的样式，而不是内联方式？我有一个css文件分离，我想改变大小的标题，例如。
像这样的东西：
.app-bar title {
font-size: 120px !important;
}
谢谢您:)
浏览 9提问于2017-08-08得票数 2
在Material UI中，我想在我的按钮上设置borderRadius。传递style属性似乎对FlatButton有效，但对RaisedButton无效。
对于RaisedButton，borderRadius应用于父<div> (这是必需的)，但不应用于<button>本身(这也是必需的)
这是Material UI中的错误吗？或者，这种行为是故意的？如果它是故意的，那么我如何制作一个圆角的RaisedButton？
import React from 'react';
import RaisedButton from 'material-
浏览 2提问于2016-01-14得票数 4
回答已采纳
我在React 16.3.2中使用material-ui的v1.1.0。我正在尝试创建一个类似于的登录页面
其中对话框具有不透明度(查找止赎权)。我正在尝试对这里描述的对话框组件使用PaperProps
这是我创建的一个组件，试图做到这一点。
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-
浏览 2提问于2018-06-02得票数 7
我正在尝试使用我的自定义颜色的AppBar标题。AppBar的标题是“我的应用程序栏”。我使用白色作为我的主题色。它对工具栏很有效，但AppBar的“标题”也使用了相同的“白色”颜色。
下面是我的代码：
import React from 'react';
import * as Colors from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from &#
浏览 3提问于2016-08-25得票数 39
即使我在我的muitheme中添加了属性component.Also，我也无法确定到底需要什么，如果有人能建议什么是学习material ui在meteor-react中的实现的最佳资源，那就太好了。
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
import MenuItem from 'material-ui/
浏览 2提问于2016-10-30得票数 1
回答已采纳
1回答
使用ToggleButton和ToggleButtonGroup组件从material-ui开始-ui的。为了避免常见的material-ui，也尝试使用styled-components。
我有以下的反应代码，这是无法正确的目标材料用户界面基础按钮。
如何使用样式组件正确地完成此操作？
我错过了什么最佳实践吗？
(我知道材料ui可能在布局上固执己见，但说我想要一个基本元素的悬停或文本颜色)。
// Also imports React, gatsby packages etc
import ToggleButton from '@material-ui/lab/To
浏览 5提问于2020-01-29得票数 3
回答已采纳
我有这个组件
import React, { FC } from "react";
import { Avatar } from "@material-ui/core";
export interface AvatarProps {
alt?: string;
src: string;
variant?: "circle" | "rounded" | "square";
sizes?: string;
}
const Component: FC<AvatarProps> = (pro
浏览 0提问于2020-08-10得票数 4
似乎如果你不将Material-UI样式表注入到jest/react-testing-library测试中，那么jsdom将无法从你的组件中获得正确的样式(例如，运行getComputedStyle(component)将为组件返回不正确的样式)。
如何正确设置jest/react- test -library测试，以便将样式正确地注入到测试中？我已经将组件包装在一个主题提供程序中，可以很好地工作。
浏览 1提问于2019-05-20得票数 5
1回答
我用的是V5材料。如何设置所选列表项的样式？我想要5便士的borderLeft。
就像这样：
const theme = createTheme({
palette: {
primary: {
// light: will be calculated from palette.primary.main,
main: colors.primary
// dark: will be calculated from palette.primary.main,
}
},
components: {
MuiListItem
浏览 7提问于2021-08-03得票数 2
回答已采纳
我想更改DatePicker组件的下划线颜色。以下是我这样做的尝试
import React from 'react'
import PropTypes from 'prop-types'
import { DatePicker as MuiDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'
import { makeStyles } from '@material-ui/core/styles'
import DateFnsUtils fr
浏览 1提问于2021-06-23得票数 1
5回答
我一直想知道Material-UI React库中的类是做什么的，但是我似乎在任何地方都找不到答案，我所链接的页面也没有做太多关于这个类做什么的解释。在座的任何人都知道这个组件应该做什么？
浏览 4提问于2019-07-16得票数 40
使用Material UI，我希望我的表的TableBody的最大高度为500px。如果有任何行不适合TableBody的高度，那么TableBody应该在TableHead锁定(冻结)的同时垂直滚动。
下面是我的代码：
import React from "react";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@materia
浏览 2提问于2018-06-28得票数 12
我们在应用程序中使用的是1.4.5 material。现在，我们正在尝试为应用程序中的所有组件设置一个字体大小。例如，我们希望为标题/按钮/段落fontSize: 14px,设置/list.诸若此类。下面是我们的主题配置示例：
import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green'
浏览 2提问于2018-08-14得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
