react / react/react-strict-dom
createTheme() - Type Error: Index signature for type 'string' is missing
Nobody has claimed this yet.
- 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:
✅ A pontential workaround would be to cast Record<string, unknown:
Expected behavior
I'd expect no type errors when following instructions from the docs.
Steps to reproduce
- Create expo project
- Follow setup instructions
- 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);
- Use it in root
_layout.tsxfromexpo-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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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