我需要我的应用程序中的“今天”按钮,如其文档(此处)@mui/x-date-pickers
所示。
本地化有问题。我将“fr”传递adapterLocale
给LocalizationProvider
但它仍然以英文显示日期。
我做了这个 stackblitz来重现这个问题。https://stackblitz.com/edit/react-tfmv7t?file=Demo.tsx
我需要我的应用程序中的“今天”按钮,如其文档(此处)@mui/x-date-pickers
所示。
本地化有问题。我将“fr”传递adapterLocale
给LocalizationProvider
但它仍然以英文显示日期。
我做了这个 stackblitz来重现这个问题。https://stackblitz.com/edit/react-tfmv7t?file=Demo.tsx
import React from 'react'
import { DesktopDatePicker } from '@mui/x-date-pickers';
function DatePicker() {
return (
<DesktopDatePicker
slotProps={{
textField: {
variant: 'filled',
focused: true,
color: 'secondary',
sx: { mb: 3, ml: 5, color: 'red' }
}
}}
/>
)
}
export default DatePicker
我想更改打开日期选择器的图标的颜色,但我不知道该怎么做
我使用一个Select
组件(假设是这个)。默认情况下,Popover
组件出现在选择字段的正下方,但我想将其放置在右侧。我将在下面描述我尝试实现此行为的方法以及每次都失败的原因。请记住,我是 MUI 的新手。
改变位置的最正确方法是设置anchorOrigin
和transformOrigin
道具,但只有当你可以访问这些道具时它才有效。该组件自行Select
创建(或更准确地说,是内部的组件)并且不提供 API 来传播 props。Popover
Menu
Select
该Menu
组件有一个传播到 的PopoverClasses
prop ,因此我想通过覆盖JS 计算的值和样式来更改位置。但无论我多么努力地试图弄清楚它是如何工作的,我都无法做到。我发现的每个指南都使用了自 MUI v5 以来已弃用的from或from 。MUI v5 中 prop是否已完全弃用?classes
Popover
left
top
makeStyles
"@mui/styles"
createUseStyles
"react-jss"
classes
添加类似 或 之类的样式"& .MuiPopover-root"
也Select
不起作用Menu
,因为Popover
DOM 顶部附近的创建可以用作模式对话框,并且不是Select
.
尽管Menu
不会直接将 props 传播到Popover
,但它会将 props 传播到MenuList
的子级a Popover
。使用MenuListProps: {ref=myRef}
我可以访问Popover
by的 DOM 元素myRef.current.parentElement
。但这还不够,因为我没有好的事件来覆盖值。是在的事件触发Popover
后短时间内创建的,因此在事件期间,值是未定义的,之后就太晚了 - 明显是如何跳跃的。onOpen
Select
myRef.current
setTimeout()
Popover
这么简单的动作却太难了。我错过了一些明显的事情吗?
遵循 MUI 文档:https://mui.com/material-ui/react-stack/我认为将某些东西垂直和水平居中所需的只是包含justifyContent='center' alignItems='center
,但这仅将其水平居中而不是垂直居中。我只是想在纸张组件中水平和垂直对齐它。
任何帮助,将不胜感激:
<Paper
elevation={2}
sx={{
minWidth: '30%%',
height: '100%',
}}
>
<Box
display='flex'
justifyContent='center'
alignItems='center'
>
<Typography>0</Typography>
</Box>
</Paper>
我有以下 mui v5 CircularProgress 代码,如何让它同时显示 3 个不同的值?
export const StatusCircle: React.FC<Props> = ({ a, b, c }) => {
return (
<StyledBox>
<StyledCircularProgress size={50} thickness={4} variant='determinate' sx={{ color: 'red' }} value={a} />
<StyledCircularProgress size={50} thickness={4} variant='determinate' sx={{ color: 'green' }} value={b} />
<StyledCircularProgress size={50} thickness={4} variant='determinate' sx={{ color: 'yellow }} value={c} />
</StyledBox>
);
};