Cum pentru a personaliza reacționa-selectați component?

Question 1

Am o mica problema cu react-select componenta restyling. Dacă aruncăm o privire asupra lor oficial doc veți vedea toate atributele care pot fi restilizate. Problema pe care o am este că în jurul textului am scris acolo e albastru frontiere, și nu le pot scoate. De asemenea, în jurul containerului.

Dacă nu-l inspecteze aici e ceea ce am primit:

Ea are ca id-ul react-select-3-input și nu se poate elimina că, chiar dacă am scrie direct pe chrome inspecție darămite să faci în cod.

Eu sunt, folosind nextjs ca-cadru și am adăugat un fișier de stil.css și de import-l în _app.tsx. Am încercat adăugarea de acesta pentru a vedea ce se întâmplă:

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

Dar nu se întâmplă nimic.

Cum crezi că pot să repar asta?

Question 2

Dacă citiți documentația pentru a reacționa-selectați puteți vedea că docs conduce spre utilizarea emoție mai mult decât drept înainte CSS.

Atunci când pun în aplicare acest lucrezi ar trebui să facă ceva de genul asta:

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

Acest lucru va crea un obiect pe care apoi le poti folosi pentru styling

<Select
    styles={reactSelectStyles}
/>

Prevăzute în codul de mai sus face sigur că implicit styling este inclus (astfel încât să puteți omite dacă doriți să) și statul poate fi folosit pentru a face diferite stiluri, în funcție de starea de a reacționa-selectați.

Aș spune că în general va avea un timp de greu de rezolvare această ajutorul CSS regulat deoarece reacționează-selectați (folosind emoție) va genera dinamic clase CSS că nu se ciocnesc cu fiecare alte.

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

Dacă citiți documentația pentru a reacționa-selectați puteți vedea că docs conduce spre utilizarea emoție mai mult decât drept înainte CSS.

Atunci când pun în aplicare acest lucrezi ar trebui să facă ceva de genul asta:

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

Acest lucru va crea un obiect pe care apoi le poti folosi pentru styling

<Select
    styles={reactSelectStyles}
/>

Prevăzute în codul de mai sus face sigur că implicit styling este inclus (astfel încât să puteți omite dacă doriți să) și statul poate fi folosit pentru a face diferite stiluri, în funcție de starea de a reacționa-selectați.

Aș spune că în general va avea un timp de greu de rezolvare această ajutorul CSS regulat deoarece reacționează-selectați (folosind emoție) va genera dinamic clase CSS că nu se ciocnesc cu fiecare alte.

Desigur, am făcut-o așa pentru celelalte părți. Problema mea este cu cutie albastră puteți vedea în jurul textului. Eu nu pot accesa prin emoție, așa că am încercat cu clasic css. Problema este ca nu pot accesa chiar folosind inspecția de Chrome.

Cum pentru a personaliza reacționa-selectați component?

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie