实施Google Material Design的React组件。 http://material-ui.com
如何在 Material-UI ExpansionPanelSummary 中换行或截断长字符串
我想创建一个 ExpansionPanel，其中摘要可能是一串很长的不间断字符（即没有连字符，没有空格）。 当我尝试时，ExpansionPanelSummary 组件显示...
我是 React js 和 MUI 组件的新手。 我正在研究以下设计，其中堆栈包含多个盒子。每个盒子都有自己的样式，堆栈中的所有盒子都相同。有没有...
我有一个正在使用 React 进行的家庭项目。我有一个非常基本的组件，它呈现一个文本框并调用传入的方法。问题是，当我运行代码时，我无法输入 i...
我有一个简单的页面，它有两个部分：一个在页面加载后显示 50% 的时间的标签，以及一个模拟滚动六面骰子结果的“滚动”按钮。这两个部分都使用...
因此，我在 React 应用程序上将对象列表显示为 MUI 卡。对象上的字段之一是 postgres 中的日期类型。对于示例卡对象，从数据库检索的值如下（...
嗨，我是新手，现在我正在努力使页面垂直和水平居中。到目前为止，我只能将其垂直居中，而不能水平居中，如附图所示......
错误：node_modules\@material-ui\utils 未导出“ForwardRef” 颂歌模块 eact-is\index.js
我正在通过故事书使用 Material UI 构建 React 项目并面临此错误（附快照）
最初，当我从 @material-ui/core 导入 AppBar 时，backgroundColor 正在工作 但是在更改导入以从@mui/material导入它之后，它只是保持浅蓝色，必须是默认值
MUI DatePicker 6.19.7 使用 sx 更改所选日期的背景颜色
如何改变箭头所指的颜色元素？使用 sx{} 日期选择器 如何改变箭头所指的颜色元素？使用 sx{} <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker className={styles.picker} slotProps={{ day: { sx: { backgroundColor: "red", }, }, }} /> </LocalizationProvider> 添加 sx: { "&.Mui-selected": { backgroundColor: "red", }, 有效，但只有当我点击某个地方，颜色才会改变...... 尝试使用 sx{} 但不知道如何在该元素上执行此操作。我的实现改变了所有日子的颜色，但没有改变选定的颜色。 您还需要定位根选择器类来更改所选日期的背景颜色。 试试这个class： slotProps={{ day: { sx: { '&.MuiPickersDay-root.Mui-selected': { bgcolor: 'red', }, }, }, }}
我正在尝试将视图滚动到特定组件。我正在使用 refs 来跟踪组件，并且尝试调用scrollIntoView 函数来移动到特定的引用。我的问题是
我试图将 MUI 自动完成选择字段放入 AppBar 组件内，但在 onFocus 时它无法按预期工作。具体来说，标签出现在 AppBar 后面，并且边框消失...
输入“ReactI18NextChildren | Iterable<ReactI18NextChildren>' 不可分配给类型 'ReactNode'
我正在点击此链接来实现反应材料自动完成。 我使用 renderInput 的方式与文档中描述的方式相同 renderInput={(params: AutocompleteRenderInputParams) ...
Typescript 模块增强不起作用：“PaletteColorOptions”类型上不存在属性“main”
我一直致力于 Material-UI 并尝试在整个调色板中使用颜色系统。尽管在运行时运行良好，但编译时似乎存在一些问题。有人可以帮助我吗
我正在使用 Next js 和 Material UI(@mui/core) 创建一个网站。当我使用下一个开发运行它时，它工作得很好，但是当我使用下一个构建时，它得到了错误的样式......
我在使用 MaterialReactTableV2 时遇到问题，因为我无法在移动屏幕上拖动行或列。在 PC 上一切都运行良好。我只是 javascript 的初学者，我还没有找到解决方案......
我使用具有动态值的 mui 滑块， 例如 const 标记 = [1, 3, 10].map((value) => ({ 价值， 标签： 值 })); 我正在使用具有动态值的 mui 滑块， for example const marks = [1, 3, 10].map((value) => ({ value, label: value })); <Slider value={value != undefined ? parseInt(value) : 0} marks={marks} step={null} max={max?.value} // 10 sx={CustomSliderStyles} /> 之后我的用户界面看起来像 但我希望 1、3 和 10 的间距相等，如下所示 或任何其他可用于此功能的滑块？ const [value, setValue] = React.useState(0); const marks = [ { value: 0, label: 1 }, { value: 1, label: 3 }, { value: 2, label: 10 }, ].map(({ value, label }) => ({ value, label, })); const max = marks.reduce((prev, current) => prev.value > current.value ? prev : current ); return ( <Slider value={value} onChange={(_, newValue: number) => { setValue(newValue); }} marks={marks} max={max?.value} // 10 /> ); }; 您可以这样做，其中值均匀分布，标签是您想要的标签。如果您在其他地方使用它，您只需记住将值重新转换为正确的标签
如何使用 React Material UI 选项卡在同一页面上突出显示主导航菜单项和子导航菜单项并获取活动状态
在我的 React 组件中，我使用 Material UI 选项卡为主导航创建主菜单，并使用 React 路由器链接而不是显示选项卡内容： 在我的 React <Header> 组件中，我使用 Material UI Tabs 为主导航创建一个 primary 菜单，并使用 React 路由器链接而不是显示选项卡内容： <Tabs value={location.pathname}> {(items || []).map((item) => ( <Tab key={item.url} label={item.title} value={item.url} href={item.url} disableRipple /> ))} </Tabs> 在同一页面上，我再次使用 Material UI 选项卡作为辅助菜单。 主导航菜单项的路线路径是：/example-path。当我导航到此路线时，此菜单项会突出显示并处于活动状态。 当辅助菜单项的选项卡与突出显示的主菜单项/example-path具有相同的路线时，两个菜单项都会突出显示并处于活动状态。 当我单击另一个辅助菜单项时，只有这个辅助菜单项会突出显示/example-path/tab-two。 如何管理同时突出显示主导航中的父项和二级菜单中的各种菜单项？ Header组件应该只匹配根路径段，而Submenu组件可以比较完整的URLpathname。请注意，如果您还有更多子路线，那么 Submenu 需要检查前两段。 它应该渲染一个 Tab 组件，而不是渲染原始锚标记 <a> 组件。这样路由器就可以响应并处理导航操作，而不是让浏览器向服务器发出页面请求并重新加载整个应用程序。标题 Link 子菜单 import { Tabs, Tab } from "@material-ui/core"; import { Link, useLocation } from "react-router-dom"; const Header = () => { const { pathname } = useLocation(); const base = `/${pathname.slice(1).split("/").shift()}`; return ( <Tabs value={base}> <Tab component={Link} to="/" label="Home" key="/" value="/" /> <Tab component={Link} to="/about" label="About" key="/about" value="/about" /> <Tab component={Link} to="/dashboard" label="Dashboard" key="/dashboard" value="/dashboard" /> </Tabs> ); }; export default Header; 应用程序 按照路径特异性的 inverse 顺序对 import { Tabs, Tab } from "@material-ui/core"; import { Link, useLocation } from "react-router-dom"; const Submenu = () => { const { pathname } = useLocation(); return ( <Tabs value={pathname}> <Tab component={Link} to="/about/about-one" label="About sub one" key="1" value="/about/about-one" /> <Tab component={Link} to="/about/about-two" label="About sub two" key="2" value="/about/about-two" /> </Tabs> ); }; export default Submenu; 内的路由进行排序，以便在回退到 less 特定路径之前匹配 more 特定路径。 Switch 更新以处理根 <Router> <Layout> <Switch> <Route path="/about/about-one"> <AboutOne /> </Route> <Route path="/about/about-two"> <AboutTwo /> </Route> <Route path="/about"> <About /> </Route> <Route path="/dashboard"> <Dashboard /> </Route> <Route path="/"> <Home /> </Route> </Switch> </Layout> </Router> 路线上的子菜单选项卡。为此，您需要做一些“黑客”操作来检查 URL 路径 不是其他主要根路由之一，这样您就可以将基本 "/" 值覆盖为完全 使用 Tabs 实用函数，"/" 代替 "/home-section/*" 子路线之一。示例：matchPath
这是我的线性渐变 填充：线性渐变(180deg, rgba(47, 76, 221, 0.40) 16.8%, rgba(47, 76, 221, 0.00) 100%); 填充：线性渐变(180deg, rgba(181, 25, 236, 0.40) -2.55%, rgb...
我试图将 Snackbar 放置在右上角，并进行一些 top: 自定义，但我无法正确设置它。 这是我的尝试： 从“反应”导入反应； 导入 { Snackbar、Aler...
是否可以在 ButtonGroup 内禁用的 Material UI 按钮上呈现工具提示而不破坏布局？
我正在尝试创建一个带有禁用按钮和工具提示的 Material UI ButtonGroup。 以下代码块正确显示按钮，但如此处所述（https://material-ui.com/components/to...