Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Conditional CSS with styled tag

Aperta
  • Qualcosa non va?
#409 8 commenti 22 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
30/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

L’issue non identifica alcun file sorgente o test; inizia riproducendo l’esempio condizionale di styled.ul e seguendo le definizioni dei tipi TypeScript di styled-tag che rifiutano il risultato false o undefined del callback. Il lavoro è concluso quando il CSS condizionale previsto viene accettato con la prop dark opzionale e l’errore del compilatore segnalato è coperto da un test di regressione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

cat: extend syntax ✍ core team 🧬 feature: proposal 💬 platform: react 🛠️

Ask your Question

Is it possible to do something like the following?

const TopLevelList = styled.ul<{ dark?: boolean }>`
  border-top: 1px solid ${BrandColors.BORDER};
  margin-top: 0;

  ${props => props.dark && ({
    color: 'black',
  })}
`;

Typescript is giving the following error:

Argument of type '(props: { dark?: boolean | undefined; }) => false | { color: string; } | undefined' is not assignable to parameter of type 'string | number | CSSProperties | ((props: { dark?: boolean | undefined; }) => TLength)'.
  Type '(props: { dark?: boolean | undefined; }) => false | { color: string; } | undefined' is not assignable to type '(props: { dark?: boolean | undefined; }) => TLength'.
    Type 'false | { color: string; } | undefined' is not assignable to type 'TLength'.
      Type 'undefined' is not assignable to type 'TLength'.ts(2345)
Lingua principale
TypeScript
Stelle
12.4k
Fork
413
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di callstack/linaria

Tutte le issue di callstack/linaria

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.