Início / coding / Perguntas / 77497849
Accepted
KostyanWest
Asked: 2023-11-17 04:24:42 +0800 CST

Como alterar a posição do componente Popover como parte do componente Select no MUI 5?

  • 772

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?

material-ui

1 respostas

  1. Best Answer

    Usando Selecto componente você pode propagar seus Popoveradereços através da MenuPropspropriedade.

    Funciona porque Menuna verdade propaga props Popovere pode aceitar todas as suas propriedades, conforme descrito na documentação

    Exemplo:

    <Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={age}
  label="Age"
  onChange={handleChange}
  MenuProps={{
    anchorReference: "anchorPosition",
    anchorPosition: { top: 0, left: 475 }
  }}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>
    • 1

relate perguntas