Wie kann ich in React ein vollständig benutzerdefiniertes Sortier-Dropdown erstellen (anstelle des standardmäßigen <sele ⇐ CSS

[Anonymous]

Ich versuche, ein Sortier-Dropdown für meine Produktliste in einer React-App zu erstellen.

Die Sortieroptionen sind Dinge wie:

• Standard
• A - Z
• Z - A
• Preis: Niedrig – Hoch
• Preis: Hoch – Niedrig

Mein erster Ansatz bestand darin, ein reguläres -Element mit -Tags zu verwenden, aber ich finde es sehr schwierig, das Dropdown-Menü mit CSS/SCSS richtig zu formatieren, Browser wenden ihre eigenen Stile an und ich kann den nicht formatieren Dropdown-Liste.

Code: Select all

Default
A → Z
Z → A
Price: Low → High
Price: High → Low

Ich möchte ein benutzerdefiniertes Dropdown-Menü erstellen, das wie mein Design aussieht (z. B. eine gestaltete Schaltfläche oder ein Div, das beim Klicken eine Liste von Optionen anzeigt).
Ich dachte darüber nach, eine Reihe von Schaltflächen mit onClick-Handlern anstelle von
zu verwenden. Was ist die am besten geeignete oder empfohlene Methode zum Erstellen eines benutzerdefinierten Formats? Dropdown zum Sortieren von Elementen in React?

Sollte ich:

• Eine benutzerdefinierte Dropdown-Komponente von Grund auf erstellen (z. B. mit divs und onClick-Handlern)?
• Oder gibt es eine saubere Möglichkeit, das native -Element zu formatieren?

Ich verwende React und SCSS.