Material ui 如何全局禁用所有材质ui组件的框阴影?

我需要禁用大多数材质ui组件的默认框阴影。现在,我通过手动设置每个组件的样式来实现这一点,如下所示: <FloatingActionButton style={{boxShadow: "none"}} /> const theme = createMuiTheme({ shadows: ["none"] }); 是否有一种方法可以全局执行此操作,可以使用主题设置?只需在主题中将zDepthShadows设置为“无”,方法是创建自定义主题,或者在导入主题时覆盖它们。在材质u

Material ui 带材质的全屏抽屉-ui@next

如何从@下一个版本中的第一个材质ui版本重新创建一个全屏抽屉 我过去能做到这一点 <Drawer width={'100%'} open={this.props.eventsDrawer} className="events-drawer"> ... </Drawer> ... 但现在我看不出有什么办法?我需要使用CSS来实现这一点吗?如果需要,我应该将其应用于哪个元素?展示了如何使用类来调整抽屉的大小。下面是该演示的精简版本: 从“React”导入React; 从

Material ui 如何使用材质UI在按钮中应用内联css const styles={ bgColor:{ 背景颜色:“#f9a825” } } 点击这里

在这里,我想改变背景颜色。它的应用,但它优先考虑主题css 类道具应用不正确 您甚至不应该使用类,因为您似乎没有注入任何类;您应该使用样式 const styles = { bgColor:{ backgroudColor: '#f9a825' } } <Button color='primary' classes={fab:classes.bgColor} variant="fab" aria-label="Checkout"> Click Her

Material ui 添加物料UI以反应SSR

我正在使用这个非常棒的React SSR应用程序,并尝试添加css库。我已经阅读了他们关于服务器端渲染的指南,但似乎做了一些错误的事情,因为我可以让按钮按图所示进行渲染,但是没有对按钮应用样式:(( 这就是我到目前为止所做的: 在client.js中 // added for Material UI import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider } from '@material-u

Material ui XGrid-页脚和分页

我在XGrid中使用分页-将其添加为属性。现在我还需要添加一个额外的页脚组件。当我使用页脚时,它会覆盖分页。如何使用附加的页脚项进行网格分页

Material ui 下一个JS+;物料UI警告:道具类名称不匹配

当我使用使用材质UI的特定自定义组件时,我在控制台中遇到此错误 我是从你那里得到的 下面是一个包含错误的沙盒: 我在互联网上找到的答案不起作用,因为大多数答案都指向一个定制的_document.tsx文件,该文件配置为使用Material UI with next js,我已经设置好了 我在生产中没有看到控制台错误,但我看到了奇怪的CSS行为

Material ui 如何修改工具提示组件的字体大小/样式?

无法将自定义类指定给工具提示组件以更新工具提示组件的样式 尝试将属性指定给类 发布于使用自定义样式制作您自己的工具提示,然后使用它: const TooltipWithBiggerFontSize = withStyles({ tooltip: { fontSize: 30 } })(Tooltip) 与其他组件一样,例如:DialogContent或DialogActions 用法 顺便说一句,你的代码很混乱。您正在混合函数组件和类组件。一次,您使用withStyles设

Material ui 我不知道’;我不知道'的渲染逻辑;选中:{}',但它确实有效,如果删除它,颜色会变浅 const GreenCheckbox=带样式({ 根目录:{ 颜色:绿色[400], “&$checked”:{ 颜色:绿色[600], }, }, 选中:{}, })(道具=>);

详细代码请参见。我们称此选择器,其中一个是选中的,这意味着此单选按钮或复选框被选中,当其选中时,我们会执行我们想要的操作,并且在您的位置上,我们会使绿色变暗 const GreenCheckbox = withStyles({ root: { color: green[400], '&$checked': { color: green[600], }, }, checked: {}, })(props => <Checkbox

Material ui 在内联样式中选择子元素(材质UI makestyles)

我正在使用材质ui makeStyles进行样式设置,无法从style.js中选择子元素 style.css .item:hover>.sublist项{ 显示:块; } 当我将其更改为内联样式时,它不起作用 style.js 项目:{ “&:hover>.sublist”:{ 显示:“块”, }, }, 下面是我如何申请课程的 计算机协会 RAS WIE 在内联样式中选择子元素的正确方法是什么?MUI类名是不确定的,请花一些时间咨询 classes.subistIte

Material ui 如何更改材质UI选项卡的颜色方案?

我希望更改材质UI选项卡的颜色方案,使用白色背景、绿色指示器和文本 这是我现在所做的 demo.js import React from "react"; import PropTypes from "prop-types"; import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles"; import AppBar from "@mat

Material ui 需要帮助设置材质ui可选列表组件的样式吗

我需要为包装在MakeSelectable()中的MaterialUI.List组件设置样式。我想通过MUIThemeProvider使用自定义主题来实现这一点,但也可以在必要时使用内联样式覆盖。问题是,除非修改主题的调色板属性上的值,否则我似乎无法覆盖任何listItem样式,这会影响所有材质ui组件 这是我的主题文件: import*作为“材质ui/样式/颜色”中的颜色; 从“/vst colors.js.es6”导入vstColors; 从“材质ui/样式/间距”导入间距; 从“材质ui/

Material ui 浏览器地址自动填充不填充“自动填充”;“国家”;选择字段元素

我有一个地址表,其中对于“状态”两个字母的代码,我使用material ui SelectField。 问题是,当浏览器建议自动填充地址时,此SelectField不会自动填充正确的状态代码。 所有其他文本字段(地址、城市、邮政编码)自动正确填充。 我已经用Chrome/Firefox/IE/Edge/Safari测试过了 您可以在此处测试我的代码:这是因为SelectField由s等组成,而不是使用本机表单元素 理论上可以使用隐藏的阴影元素来捕获输入,但某些浏览器不会在autofill上触发D

Material ui Typescript材质UI beta版本11网格

我正在我的项目中使用typescript和MaterialUI。 升级到v1.0.0-beta.11版后,现在我无法在网格组件中添加类名 如何解决此问题?我也遇到过同样的问题,但尝试升级到material ui v1.0.0-beta.12,似乎已经解决了

Material ui 材质UI:无法在网格方向=列对齐项目=”内调整网格项目的大小;中心“;

当我用direction=column和alignItems=“center”创建网格时。我的子网格项具有固定大小,我无法使用xs={…}更改它。下面的代码生成具有相同宽度的文本字段。删除“方向”或“对齐”项会将栅格调整为指定的xs。 我希望有更宽的文本字段,并且仍然将它们放在中间 <Grid container spacing={2} direction="column" alignItems="center"> <Grid item xs={4}>

Material ui 如何拉取反应选择';(it&x27;s z索引)扩展面板上方的s下拉菜单?

我在ExpansionPanel(材质ui的一个组件)中使用了react select,它使ExpansionPanel成为一个不需要的滚动条。我怎样才能修好它?我试图更改z索引,但没有成功。考虑图片中的第三个选择,它是由扩展面板隐藏的。先谢谢你 我搜索了许多资源,并尝试了许多方法(如z索引、溢出、位置等),但没有一种有效。最后我在这个链接上找到了答案: 这是对我有用的答案: 如果您使用的是react select的v2,则可以使用menuPortalTarget属性将下拉列表渲染到页脚的父

Material ui 无法在模具项目中使用材质ui组件

我想在我的一个模具组件中使用material TextField。由于模具组件是在JSX上实现的,而Material UI也是在导出JSX.Element时实现的,所以我认为实现起来非常困难,但当我执行这个简单的示例时: import { Component, Host, h, Element, ComponentInterface } from '@stencil/core'; import TextField from '@material-ui/core/TextField'; Comp

Material ui 物料UI XGrid:我可以控制行的初始排序顺序吗?为什么';t apiRef.getAllRowIds()不再遵守排序顺序?

我最近将@material ui/x-grid升级到了4.0.0-alpha.12版(从alpha.6版),希望通过网格解决一些bug。不幸的是,这导致了更多的问题 以前,网格将按照在提供的“行”数组中定义的顺序呈现项。 例如,如果您提供的数组如下所示: const rows = [{ id: 10 }, { id: 0 }, { id: 5 }]; 网格将按该顺序渲染。在alpha 12中,网格在最初渲染行时似乎会自动按“asc”排序。是否有办法保留提供的项目顺序 同样在之前的alpha 6

Material ui 材质界面:手动高亮显示xgrid行

我是一个新的材料用户界面和反应一般,但作为一个10年的HTML用户界面兽医,我现在是如此困惑。我们正在使用带有行和列的XGrid组件。当你将鼠标悬停在行上时,它们会变为浅蓝色以高亮显示,但我不知道这是如何发生的。当我使用常规检查器检查该行时,将鼠标悬停在该行上时,我看不到任何类更改。当我强制悬停状态时,它不会高亮显示该行。我猜有两件事 这是鼠标移动事件,不是悬停 它使用一些内置的浏览器高亮显示,而不是类 无论如何,我要做的是手动高亮显示一行,使用相同的类/颜色或调用一些API函数是有意义的,但我

Material ui 如何用笑话和剧作家测试材料UI选择组件?

我想通过剧作家选择一个选项,但我无法选择一个选项。怎么了 梅 如果您复制的内容准确,可能会有一些空白。我会尝试按值选择: wait page.selectOption('[data testid=color]',{value:'red'}); waitpage如何。选择option(“[data testid=color]”,“red”)@hardkoded我试过了,但也不起作用。这不起作用,测试失败 <Select data-testid=&q

Material ui 如何使选项卡支持类似AppBar的zDepth

要在选项卡底部绘制阴影吗 如果您指的是,我相信没有zDepth属性。最好将选项卡组件折叠到AppBar中 但是,您可以通过以下方式手动添加: style={{boxShadow: '0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.12)'}} 如果你指的是,我相信没有zDepth属性。最好将选项卡组件折叠到AppBar中 但是,您可以通过以下方式手动添加: style={{boxShadow: '0 1px 6px rgba(0,0,0

Material ui 列表项上的灰色背景色,而不是白色

我尝试使用材质ui制作列表,但由于某些原因,列表项的背景颜色变为灰色。我不明白这种灰色是从哪里来的。根据文档,列表项的颜色应为白色 const muiTheme = getMuiTheme({ fontFamily: 'Roboto, sans-serif', palette: { primary1Color: blue500 } }); render () { return ( <MuiThemeProvider muiTheme={muiThe

Material ui 如何在材质ui中设置按钮的样式

您好,我想用不同的颜色设置三个按钮的样式,但是当这些按钮被禁用时,我在开始添加的自定义样式将覆盖默认样式disabledTextColor,这将添加默认的淡入度和透明度值,因此用户可以看到按钮被禁用。如何设置禁用状态的样式,或者哪个应该是设置labelStyle和/或disabledTextColor样式的正确方法?这里有一个例子 const style = { labelStyle: { color: 'red; } } <FlatBut

Material ui 如何从组件中访问主题调色板?

我正在尝试构建一个组件,它呈现一个显示错误的div function ErrorDiv(props) { return ( <Card> <Typography>{props.message}</Typography> </Card> ); } 函数ErrorDiv(道具){ 返回( {props.message} ); } 我想设置的样式,使背景色为调色板.error.main,而的字体颜色为白色 但是,我

Material ui 物料界面,无此类文件或目录,打开'\node#u modules\@babel\package.json';

我最近在我的项目中添加了@materialui/core(v3.0.2)。 我需要物料界面,因为物料界面时间选择器。 在那之后,我的构建就不起作用了 在npm运行生成后获取错误: 未经处理的PromisejectionWarning:错误:eNote:没有此类文件或目录,请打开“..\node\u modules\@babel\package.json” 在添加空的package.json(如果这是唯一的问题,请尝试)后,出现以下错误: 未经处理的PromisejectionWarning:错误

Material ui 将路由器dom与材质ui进行交互

我在我的react(typescript)应用程序中使用MaterialUI和react路由器dom 我尝试使用以下提示/帮助,这样当用户单击按钮(或其他)时,他会被重定向到该路线。非常基本的东西。当我单击按钮时,浏览器的url窗口中的url将更新,但未加载正确的组件。我使用引导(和“react router bootstrap的NavigationLink”)实现了这一点,但现在我被卡住了。有什么建议可以让它工作吗 (我也使用Mobx作为状态处理器),我也很乐意使用任何其他路由器,如果这能让我

Material ui 如何在createStyles中正确访问道具?

我正在试图弄清楚如何在我的TypeScript项目中的createStyles中访问props。我找不到任何好的例子 下面是一个我正在尝试做的简化示例: type Props = { isActive: boolean; } const useStyles = makeStyles<Theme, Props>((theme: Theme) => createStyles({ root: props => ({ border: `1px ${p

Material ui 如何更改材质ui晶圆厂的高度?

我想编辑我的材料的宽度和高度ui晶圆厂按钮。我试图通过使用classname和应用样式来更改它。宽度会改变,但我的问题是高度不会改变 这是css代码: const dashboardStyles = makeStyles(theme => ({ infoButton: { height: '20px', width: '20px' } })); 它会更改宽度,但不会更改高度。感谢您的帮助。您可以使用材质ui制作样式: import Rea

Material ui 材质UI样式最佳实践

我正在使用带有React的材质UI。我有以下方法: 对于全局样式,我使用ThemeProvider palette: { type: 'dark', primary: { main: '#123', }, secondary: { main: '#456', }, 对于本地样式(在组件中),我使用的是withStyles: const styl

Material ui 将id添加到选项卡字段@material ui/core

为了使测试更容易,但是@material ui/core没有提供这个机会,我如何实现它?在官方,它确实有id,您是否尝试过检查?请给我一个示例,我已经尝试过,并在html中检查过,但输入字段没有任何id@hgb123@hgb123是对的,,我想你是在尝试自动化?如果您查看他们的示例,它会在DOM中的按钮处附加它(至少在默认情况下)。它还绑定到选项卡,如下所示prop@95faf8e76605e973你试过添加它吗?当您检查html时,输入元素上没有id。是的,我看了一下他们的示例。但是,我不确定

Material ui 如何访问主题工具栏断点属性?

我正在使用材质ui themeProvider,并尝试以以下样式访问默认主题中的所有高度值: makeStyles(theme => createStyles({ ... marginTop: -theme.mixins.toolbar.minHeight, // works [`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: { marginTop: -theme.mixins.toolbar.@me

Material ui Uno平台材料卡

我试图使用Uno添加的材质设计的卡片。然而,当我遵循这个例子时,卡片不会出现。我正在使用应用程序其他地方的材料中的bottomNavigationBar,它工作正常。请注意,我看到了一个带有Header的示例和一个带有HeaderContent的示例。我两个都试过了,但都不起作用。没有显示任何内容-IOS或Android。我错过了什么?谢谢你的帮助 <Page x:Class="sampleApp.Shared.Views.appCardPage" xm

Material ui 如何在材质UI上居中显示对话框标题?

如何在对话框(材质UI)上居中显示标题? Mi代码 对话框boby..asdasdasd 这对我来说很有用: <Dialog titleStyle={{textAlign: "center"}} ... /> u只需使用对话框标题组件并在其中添加排版组件即可 <DialogTitle> <Typography variant="h3" align="center">Centered Title&l

Material ui 材质UI:窗体样式

我正在寻找一个解决方案来编辑我的材质ui表单的样式。 我想改变背景和边界 我尝试直接在CSS中进行更改: input { background:#999; } 但是它改变了所有div()的背景 我正在将Redux表单与Material UI一起使用:Material UI方式-在带有表单的jsx文件中,您可以定义一个包含类名的主题 import classNames from "classnames"; .... const styles = theme => ({ form_i

Material ui 如何更改从inputBase、outlined及其伪类继承的select组件的CSS

我正在尝试自定义材质ui的选定组件的CSS,这是从class=“MuiInputBase-root-97 MuiInput-root-84 MuiInput-underline-88 MuiInputBase-formControl-98 MuiInput-formControl-85”继承而来的,现在我无法更改默认设计。请帮帮我,我对材料界面没有太多经验 我尝试在类props中传递一个对象,该类props为select to change样式,由MuiInputBase-root-97、Mui

Material ui 材质UI图标按钮点击不';让我们来处理这个事件

我安装了“@material ui/core”:“^4.9.2”和“@material ui/icons”:“^4.9.1” 在我的表单中,我有几行,每行有一个add按钮和一个remove按钮。我希望“删除”按钮从单击的行中删除该行。它适用于带有“-”字符的常规按钮。但是我想让它看起来很别致,所以我把我的按钮从图标按钮中替换了出来,并导入了要使用的图标 import {AddCircleOutline,RemoveCircleOutlineOutlined} from "@material-ui

Material ui 如何使用材质UI日期选择器的基本示例

我不知道为什么我不能思考如何使用MaterialUI的日期选择器。文件似乎不完整?我说得对吗 以下是我的基本示例: import {DatePicker, MuiPickersUtilsProvider} from '@material-ui/pickers'; import DateFnsUtils from "@date-io/date-fns"; ... somewhere in the render: <MuiPickersUtilsProvider

Material ui 材质UI网格对齐

如何在材质UI中垂直对齐项目? 这里我想把Start元素放在顶部,Center元素放在中间,End元素放在底部 我正在寻找最清晰、最好的解决方案,如果您使用网格,请执行以下操作: <Grid container direction="column" justify="center" alignItems="center" spacing={

Material ui 如何更改materialui中的默认间距单位

我刚刚开始使用material ui,并尝试将基本间距单位从8更改为10px。在我的主题中,我在哪里设置这个?const-theme=createMuiTheme({ 间距:4, }); 主题。间距(2)/=4*2 您在哪里看到的8px?实际上我现在知道怎么做了,只是在创建主题时设置间距值

Material ui 物料界面是否有日期选择器?

我安装了材质界面“^1.0.0-beta.36”。文件上说有个日期选择器 但是我在节点\u模块\material ui中找不到它,也在任何子文件夹中找不到它 更改日志表明,计划在将来的版本中支持日期选择器: 1.0.0-beta.17-2017年10月16日 随着垃圾收集的稳定,我们将能够添加新的 功能,如步进器、扩展面板或日期/时间选择器。但是我们 你还没来 从“物料界面/TextField”导入TextField; 材质ui v1当前提供了几个日期选择器。但是,没有特定的DatePicker

Material ui MUI栅格组件的自定义间距

在材质ui网格中,我们可以将间距作为道具传递,以指定网格项目之间的间距,但这会在所有边上指定相等的填充 有没有一种方法可以为自顶向下指定不同的填充,为左-右指定不同的填充(或者没有填充)

Material ui 将“样式”属性传递给“创建视图”的卡组件

我在Create视图的底部有一个带有TabbedForm的自动完成组件 当父卡的溢出组件设置为隐藏时,下拉列表被隐藏 是否有方法将样式属性传递给父卡组件,以覆盖默认材质ui溢出属性 如果没有,我是否可以使用任何技巧在渲染时实现这一点?尝试以下方法: import { withStyles } from '@material-ui/core/styles' const cardCreateStyles = { card: { overflow: 'scroll', backg

Material ui MaterialUI中的CSS转换

我试图在我的应用程序中实现MaterialUI主题。到目前为止,除了transition属性外,我已经有了这个和所有东西。Chrome开发工具显示属性处于活动状态,但悬停时没有背景转换。很明显,我找的地方不对,因为我找不到讨论这个话题的地方 import { createMuiTheme } from '@material-ui/core/styles'; import blueGrey from '@material-ui/core/colors/blueGrey'; const prima

Material ui type=date的TextField组件创建不需要的日历图标

由于某种原因,material ui提供的组件根据文本字段的类型在输入端生成一个小图标 如果type=“date”,则在输入的末尾会出现以下图标: 如果type=“time”那么我会得到一个时钟图标。 令人困惑的是,这些图标并没有显示在我测试的所有系统上。例如,我使用的虚拟机不显示这些图标,我的ios设备也是如此。但当我在本地试用时,这些图标就会出现 我已经阅读了for TextFields,但找不到这些图标的任何api引用。 首先,我认为它是某种endadorment,但试图用endordo

Material ui 如何从材质ui列表项中删除默认填充?

材质ui在列表和列表项上添加默认填充如何删除? 任何对资源的帮助或指导都将不胜感激。您可以覆盖列表项组件的根类,并传递所需的填充 constyles=theme=>({ 根目录:{ 宽度:“100%”, 最大宽度:360, 背景色:theme.palete.background.paper }, 项目:{ 填充:0 } }); 函数简单列表(道具){ 常量{classes}=props; 返回( ); } 请参阅。对于其他来到这里的人,从列表中删除默认填充的简单方法是使用列表组件上的禁用填充属

Material ui 如何在asp.net mvc项目中使用材质UI

有没有一种方法可以使用MaterialUI,而不必使用NodeJ安装所有依赖项。我很想在ASP.NET项目中使用此功能,但不知道从何处开始安装依赖项以及所有这些功能。这很简单。。按照以下步骤操作 将所有现有更改提交到源代码管理或备份现有代码 在bundle config中删除或注释twitter引导包 使用NPN。。安装material design lite软件包 将所有.css和.js引用添加到bundle 添加添加到布局页面的新捆绑包 记住将所有使用twitter引导的类更改为materi

Material ui 如何在未连接到internet的计算机上脱机使用材质ui

我想在没有任何互联网连接的机器上使用材质ui 只有内部网络可以显示来自未连接到internet的服务器的web客户端页面 我试着通过下载 但这根本不起作用 怎么做 npm安装@material ui/core?@JleruOHeP:不工作。。。已经尝试:(那么你能更好地解释一下你想如何使用它以及如何访问你的页面吗?你如何在代码中引用材料用户界面?@jleroohep:我有一些专用网络-这意味着我有服务器和20台机器,它们通过网络电缆连接..没有全球互联网接入。。。

  1    2   3   4   5   6  ... 下一页 共 6 页