Jak přizpůsobit reagovat-select component?

Question 1

Mám trochu problém s react-select součástí restyling. Když se podíváte na jejich oficiální doc uvidíte všechny atributy, které mohou být restyled. Problém mám, je, že kolem textu píšu, je modré hranice, a nemohu je odstranit. Také kolem kontejneru.

Když jsem jej kontrolovat, tady je to, co jsem dostal:

To má jako id react-select-3-input a nelze odstranit, že i když píšu přímo na chrome inspekce natož to dělat v kódu.

Já používám nextjs jako rámec a přidal jsem soubor styl.css a importovat je do _app.tsx. Snažil jsem se přidat to, aby viděli, co se stane:

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

Ale nic se neděje.

Jak myslíte, že to můžu napravit?

Question 2

Pokud budete číst dokumentaci reagovat-zvolte, můžete vidět, že doktoři řídit vás k použití emoce více, než přímo vpřed CSS.

Při provádění této práci by měl dělat něco jako 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",
    }),
};

Tím se vytvoří objekt, který pak můžete použít pro styling

<Select
    styles={reactSelectStyles}
/>

Za předpokladu, v kódu výše je si jistý, že výchozí styl je v ceně (takže můžete vynechat, pokud chcete) a stav může být použita k vykreslení různých stylů v závislosti na stavu reagovat vyberte.

Řekl bych, že jste celkově bude mít víc času řešení pomocí pravidelné CSS, protože reagují-vyberte (pomocí emocí) bude generovat dynamické CSS tříd, které není v rozporu s navzájem.

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

Pokud budete číst dokumentaci reagovat-zvolte, můžete vidět, že doktoři řídit vás k použití emoce více, než přímo vpřed CSS.

Při provádění této práci by měl dělat něco jako 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",
    }),
};

Tím se vytvoří objekt, který pak můžete použít pro styling

<Select
    styles={reactSelectStyles}
/>

Za předpokladu, v kódu výše je si jistý, že výchozí styl je v ceně (takže můžete vynechat, pokud chcete) a stav může být použita k vykreslení různých stylů v závislosti na stavu reagovat vyberte.

Řekl bych, že jste celkově bude mít víc času řešení pomocí pravidelné CSS, protože reagují-vyberte (pomocí emocí) bude generovat dynamické CSS tříd, které není v rozporu s navzájem.

Samozřejmě, že jsem to udělal takhle pro další díly. Můj problém je s blue box můžete vidět kolem textu. Nemůžu se dostat přes emoce, takže jsem se snažil s klasickým css. Problém je, že nemohu přistupovat i pomocí kontroly Chrome.

Jak přizpůsobit reagovat-select component?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii