react / react/react-strict-dom

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

Open
#290 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
3.6k
Forks
206
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Theming Components documentation and the supplied TOKENS, DEFAULT_THEME, and css.createTheme reproduction in the linked Expo example. Inspect the createTheme type definitions and type-check the example; done means the documented code compiles without casting to Record<string, unknown>.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
40/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.