Perguntas[material-ui](coding)

Como o título diz: Não é possível substituir o traço da borda do meu Buttonelemento que pode ser composto. Abaixo está meu botão personalizado, como invoco o elemento que pode ser composto passando um border:BorderStrokeparâmetro e uma imagem mostrando sua aparência.

@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()
        }
    }
    
}

chamando o botão Composable assim:

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)
}

não ultrapassa a borda original. Se você olhar a imagem abaixo. Eu tenho uma borda = Color.Red ATRÁS da minha coloração MaterialTheme... mas não consigo remover a cor verde e apenas mostrar o vermelho.

Tentei envolver meu botão em um Surface(){}estilo de borda aplicado.

Eu também tentei alterar a Button.modifier = modifier.border()propriedade

Coçando a cabeça com isso, alguma sugestão?

Estou tentando ter um recurso em um DataGrid MUI, se você clicar em uma linha, ela se expande com mais informações,

Aqui está o que eu tentei Demo , mas não consigo personalizar isso para ter largura total da linha e ter mais informações.

Esperando algo como a imagem abaixo

Preciso do botão "hoje" no @mui/x-date-pickersmeu aplicativo, conforme mostrado na documentação (aqui) .

Há um problema com a localização. Estou passando o "fr" adapterLocalepara o LocalizationProvidermas ainda exibe a data em inglês.

Fiz este stackblitz para reproduzir o problema. 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

quero mudar a cor do ícone que abre o seletor de data, mas não sei como fazer

Eu uso um Selectcomponente (suponha que este ). Por padrão, um Popovercomponente aparece logo abaixo do campo de seleção, mas quero colocá-lo no lado direito. Descreverei abaixo as maneiras pelas quais tentei alcançar esse comportamento e como falhei todas as vezes. Lembre-se de que sou um novato no MUI.

1. A maneira mais adequada de mudar a posição é configurar anchorOrigine transformOriginadereços, mas só funciona se você puder acessar esses adereços. O Selectcomponente cria o Popoverpor conta própria (ou mais precisamente, um Menucomponente dentro do Select) e não fornece uma API para propagar adereços.

2. O Menucomponente possui uma PopoverClassesprop que se propaga classespara o Popover, então eu queria mudar de posição substituindo lefte topestilos com valores calculados por JS. Mas não importa o quanto eu tentasse descobrir como funcionava, não consegui. Todos os guias que encontrei usam makeStylesou "@mui/styles"estão createUseStylesobsoletos "react-jss"desde o MUI v5. O prop está classestotalmente obsoleto no MUI v5?

3. Adicionar estilos como "& .MuiPopover-root"ou Selectnão Menufuncionou também, porque ele é Popovercriado próximo ao topo do DOM para funcionar como uma caixa de diálogo modal e não é filho do Select.

4. Apesar de Menunão propagar adereços para o Popoverdiretamente, ele propaga adereços para a MenuListque é filho do Popover. Usando MenuListProps: {ref=myRef}posso acessar o elemento DOM do Popoverby myRef.current.parentElement. Mas não é suficiente, porque não tenho nenhum evento bom para substituir valores. O Popoveré criado após um curto período de tempo após um onOpenevento ser acionado Select, portanto, durante o evento, um valor myRef.currenté indefinido e depois setTimeout()é tarde demais - é perceptível como Popoversalta.

É muito difícil para uma ação tão simples. Perdi algo óbvio?

Seguindo a documentação do MUI: https://mui.com/material-ui/react-stack/ Achei que tudo que precisava para centralizar algo tanto vertical quanto horizontalmente era include justifyContent='center' alignItems='center, mas isso apenas centraliza horizontalmente e não verticalmente. Estou apenas tentando alinhá-lo horizontalmente e verticalmente no componente de papel.

Qualquer ajuda seria apreciada:

               <Paper
                    elevation={2}
                    sx={{
                        minWidth: '30%%',
                        height: '100%',
                    }}
                >
                    <Box
                        display='flex'
                        justifyContent='center'
                        alignItems='center'
                    >
                        <Typography>0</Typography>
                    </Box>
                </Paper>

Eu tenho o seguinte código para mui v5 CircularProgress como ser capaz de mostrar 3 valores diferentes ao mesmo tempo?

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>
);
};