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

createTheme() - Type Error: Index signature for type 'string' is missing

Aperta
  • Qualcosa non va?
#290 1 commento 2 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

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

Direzione di ricerca

Inizia dalla documentazione di Theming Components e dalla riproduzione fornita di TOKENS, DEFAULT_THEME e css.createTheme nell’esempio Expo collegato. Ispeziona le definizioni dei tipi di createTheme ed esegui il controllo dei tipi sull’esempio; il lavoro è completato quando il codice documentato viene compilato senza conversione in Record<string, unknown>.

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

Descrizione

bug
Describe the issue

Hello, I tried the example from Theming Components docs, but I faced a minor TypeScript issue. Not sure if I'm doing something wrong.

❌ Type Error:
Image
✅ A pontential workaround would be to cast Record<string, unknown:
Image
Expected behavior

I'd expect no type errors when following instructions from the docs.

Steps to reproduce
  1. Create expo project
  2. Follow setup instructions
  3. Copy this code:
import { css } from 'react-strict-dom';

export const DARK_MODE = '@media (prefers-color-scheme: dark)';

const TOKENS = {
  primaryText: {
    default: 'black',
    [DARK_MODE]: 'white',
  },
  secondaryText: {
    default: '#333',
    [DARK_MODE]: '#ccc',
  },
  accent: {
    default: 'blue',
    [DARK_MODE]: 'lightblue',
  },
  background: {
    default: 'white',
    [DARK_MODE]: 'black',
  },
  lineColor: {
    default: 'gray',
    [DARK_MODE]: 'lightgray',
  },
};

export const DEFAULT_THEME = css.defineVars(TOKENS);

const BRAND_THEME = {
  primaryText: { default: 'purple', [DARK_MODE]: 'lightpurple' },
  secondaryText: { default: 'pink', [DARK_MODE]: 'hotpink' },
  accent: 'red',
  background: { default: '#555', [DARK_MODE]: 'black' },
  lineColor: 'red',
};

export const branding = css.createTheme(DEFAULT_THEME, BRAND_THEME);
  1. Use it in root _layout.tsx from expo-router:
import { Slot } from 'expo-router';
import { html } from 'react-strict-dom';

import { branding } from '@/src/theme/constants';
import '@/src/theme/stylex.css';

export default function Layout() {
  return (
    <html.div style={[branding]}>
      <Slot />
    </html.div>
  );
}
Test case

https://github.com/LunatiqueCoder/expo-strict-dom-example

Additional comments

No response

Lingua principale
JavaScript
Stelle
3.6k
Fork
208
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 react/react-strict-dom

Tutte le issue di react/react-strict-dom

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.