Ako prispôsobiť reagovať-vyberte zložky?

Question 1

Mám trochu problém s react-select komponent restyling. Ak ste sa pozrieť na ich úradný doc zobrazia sa všetky atribúty, ktoré môžu byť inovovaný. Problém mám, je, že okolo text píšu tam je modrá hranice, a nie je možné odstrániť ich. Aj okolo kontajnera.

Ak som prezrieť tu je to, čo som si:

To má ako id react-select-3-input a nedá odstrániť, že aj keď som písať priamo v prehliadači chrome inšpekcie nieto robiť to v poriadku.

Ja používam nextjs ako rámec a ja som pridal súbor štýl.css a importovať ho do _app.tsx. Snažil som sa pridať tento vidieť, čo sa stane:

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

Ale nič sa nedeje.

Ako si myslíte, že môžem opraviť?

Question 2

Ak ste si prečítali dokumentáciu pre reagovať-vyberte, môžete vidieť, že dokumenty viesť vás k pomocou emócie viac ako rovno vpred CSS.

Pri vykonávaní tejto práce by mal urobiť niečo ako toto:

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

To bude vytvorenie objektu, ktorý si potom môže použiť pre styling

<Select
    styles={reactSelectStyles}
/>

Za predpokladu, kód nad zabezpečuje, že štandardný štýl je v cene (tak môžete vynechať, ak chcete) a štát môže byť používaný robiť spôsobiť rôzne štýly v závislosti na stave reagovať-vyberte položku.

Povedal by som, že ste celkovo bude mať ťažšie riešenie tejto pomocou bežných CSS od reagovať-vyberte položku (pomocou emócie) bude vytvárať dynamické CSS triedy, ktoré nie sú v rozpore s ostatnými.

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

Ak ste si prečítali dokumentáciu pre reagovať-vyberte, môžete vidieť, že dokumenty viesť vás k pomocou emócie viac ako rovno vpred CSS.

Pri vykonávaní tejto práce by mal urobiť niečo ako toto:

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

To bude vytvorenie objektu, ktorý si potom môže použiť pre styling

<Select
    styles={reactSelectStyles}
/>

Za predpokladu, kód nad zabezpečuje, že štandardný štýl je v cene (tak môžete vynechať, ak chcete) a štát môže byť používaný robiť spôsobiť rôzne štýly v závislosti na stave reagovať-vyberte položku.

Povedal by som, že ste celkovo bude mať ťažšie riešenie tejto pomocou bežných CSS od reagovať-vyberte položku (pomocou emócie) bude vytvárať dynamické CSS triedy, ktoré nie sú v rozpore s ostatnými.

Samozrejme som si to, ako je to pre ostatné časti. Môj problém je s blue box, môžete vidieť okolo textu. Nemôžem prístup prostredníctvom emócie, a tak som sa snažil s klasickými css. Problém je, že nemôžem pristupovať aj pomocou kontroly Chrome.

Ako prispôsobiť reagovať-vyberte zložky?

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii