mui / mui/material-ui

Type safe colors

Open
#26,475 7 comments 12 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: all components type: new feature typescript
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

As discussed in #13875, there is currently support for specifying the colors, based on the configuration in the theme in the following format: "common.white". For example:

<Typography color="common.white">text</Typography>

This works great, but it is not type safe. With the introduction of Template Literal Types in TypeScript, I believe that this should now be possible to ensure the type-safety.

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 Typography color prop shown in the issue and review the related discussion in #13875. Investigate whether TypeScript template literal types can make theme color strings type-safe. Done means the supported color format is type-checked without breaking the existing configuration behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.