问题[material-ui](coding)

正如标题所示：无法覆盖我的Button可组合项的边框笔画。下面是我的自定义按钮、如何通过传递参数来调用可组合项border:BorderStroke以及显示其外观的图像。

@Composable
fun CustomButtonPrimary(
    onClick: () -> Unit,
    shape: RoundedCornerShape? = null,
    modifier: Modifier = Modifier,
    color: Color? = null,
    border: BorderStroke? = null,
    enabled: Boolean = true,
    content: @Composable RowScope.() -> Unit
){
    
    Button(
        onClick = onClick,
        modifier = modifier.height(30.dp),
        contentPadding = PaddingValues(top = 0.dp, bottom = 0.dp, start = 8.dp, end = 8.dp),
        shape = shape ?: MaterialTheme.shapes.small,
        enabled = enabled,
        colors = ButtonColors(
            containerColor = color ?: MaterialTheme.colorScheme.primary.copy(alpha = 0.8f),
            contentColor = if(color != null) Color.LightGray.copy(alpha = 0.75f) else MaterialTheme.colorScheme.surfaceVariant,
            disabledContainerColor = Color.DarkGray,
            disabledContentColor = Color.White
        ),
        border = border
    ) {
        ProvideTextStyle(value = MaterialTheme.typography.titleSmall) {
            content()
        }
    }
    
}

像这样调用可组合按钮：

CustomButtonPrimary(
    onClick = { ... },
    modifier = modifier
        .widthIn(95.dp, 120.dp)
        .height(20.dp),
    color = if(account.availableFunds <= 0) Color.DarkGray else null,
    border = BorderStroke(1.dp, Color.Red)
) {
    Text(text = btnText)
}

不会覆盖原来的边界。如果你看下面的图片。我的 MaterialTheme 着色后面有一个 border = Color.Red...但我无法删除绿色而只显示红色。

我尝试将我的按钮包装在Surface(){}应用边框样式中。

我也尝试过改变Button.modifier = modifier.border()属性

正在纠结这个问题，有什么建议吗？

我正在尝试在 MUI DataGrid 中添加一个功能，如果您单击一行，它会展开更多信息，

这是我尝试过的演示 ，但我无法自定义它以具有行的完整宽度并获得更多信息。

期待类似下图的内容

我需要我的应用程序中的“今天”按钮，如其文档（此处）@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 的新手。

1. 改变位置的最正确方法是设置anchorOrigin和transformOrigin道具，但只有当你可以访问这些道具时它才有效。该组件自行Select创建（或更准确地说，是内部的组件）并且不提供 API 来传播 props。PopoverMenuSelect

2. 该Menu组件有一个传播到 的PopoverClassesprop ，因此我想通过覆盖JS 计算的值和样式来更改位置。但无论我多么努力地试图弄清楚它是如何工作的，我都无法做到。我发现的每个指南都使用了自 MUI v5 以来已弃用的from或from 。MUI v5 中 prop是否已完全弃用？classesPopoverlefttopmakeStyles"@mui/styles"createUseStyles"react-jss"classes

3. 添加类似 或 之类的样式"& .MuiPopover-root"也Select不起作用Menu，因为PopoverDOM 顶部附近的创建可以用作模式对话框，并且不是Select.

4. 尽管Menu不会直接将 props 传播到Popover，但它会将 props 传播到MenuList的子级a Popover。使用MenuListProps: {ref=myRef}我可以访问Popoverby的 DOM 元素myRef.current.parentElement。但这还不够，因为我没有好的事件来覆盖值。是在的事件触发Popover后短时间内创建的，因此在事件期间，值是未定义的，之后就太晚了 - 明显是如何跳跃的。onOpenSelectmyRef.currentsetTimeout()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>
);
};