Como personalizar reagir-selecione o componente?

Question 1

Eu tenho um pouco de problema com react-select componente restyling. Se você der uma olhada em seus oficial doc , você verá todos os atributos que podem ser renovados. O problema que eu tenho é que todo o texto que eu escrevo há azul fronteiras, e não pode removê-los. Também ao redor do recipiente.

Se eu inspecioná-lo, aqui está o que eu recebo:

Tem como documento de identificação react-select-3-input e não pode remover esse mesmo se eu escrever diretamente no chrome inspeção e muito menos fazê-lo no código.

Eu estou usando nextjs como framework e eu adicionei um arquivo de estilo.css e importá-lo para _app.tsx. Eu tentei adicionar este para ver o que acontece:

#react-select-2-input {
  background-color: red;
  color: red;
  font-size: 40;
  background-color: red;
}

Mas nada acontece.

Como você acha que eu posso corrigir isso?

Question 2

Se você ler a documentação para reagir-selecione você pode ver que o google docs a orientar você no sentido de usar a emoção mais do que para a frente CSS.

Ao implementar esta você trabalha deve fazer algo como isto:

const reactSelectStyles = {
    singleValue: (provided, state) => ({
        ...provided,
        color: 'inherit',
    }),
    menu: (provided, state) => ({
        ...provided,
        'z-index': 9,
    }),
    multiValue: (provided, state) => ({
        ...provided,
        color: state.isDisabled ? "#000" : "#fff",
    }),
};

Isto irá criar um objeto que você pode usar para compor o look

<Select
    styles={reactSelectStyles}
/>

Desde que o código acima faz com a certeza de que o padrão de estilo está incluído (assim você pode omitir-lo se você quiser) e o estado pode ser usado para compor diferentes estilos, dependendo do estado de reagir-escolha.

Eu diria que no geral vai ter um tempo difícil de resolver esta usando CSS regular desde reagir-selecione (usando a emoção) vai gerar dinâmicas de classes CSS que não colidem uns com os outros.

Tor Raswill · Answer 1 · 2021-11-18T09:48:22

Se você ler a documentação para reagir-selecione você pode ver que o google docs a orientar você no sentido de usar a emoção mais do que para a frente CSS.

Ao implementar esta você trabalha deve fazer algo como isto:

const reactSelectStyles = {
    singleValue: (provided, state) => ({
        ...provided,
        color: 'inherit',
    }),
    menu: (provided, state) => ({
        ...provided,
        'z-index': 9,
    }),
    multiValue: (provided, state) => ({
        ...provided,
        color: state.isDisabled ? "#000" : "#fff",
    }),
};

Isto irá criar um objeto que você pode usar para compor o look

<Select
    styles={reactSelectStyles}
/>

Desde que o código acima faz com a certeza de que o padrão de estilo está incluído (assim você pode omitir-lo se você quiser) e o estado pode ser usado para compor diferentes estilos, dependendo do estado de reagir-escolha.

Eu diria que no geral vai ter um tempo difícil de resolver esta usando CSS regular desde reagir-selecione (usando a emoção) vai gerar dinâmicas de classes CSS que não colidem uns com os outros.

Claro que eu fiz assim para as outras partes. O meu problema é com a caixa azul você pode ver todo o texto. Eu não consigo acessá-lo através da emoção, então eu tentei com o clássico css. O problema é que eu não consigo mais acessá-lo, mesmo usando a inspeção do google Chrome.

Como personalizar reagir-selecione o componente?

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria