How to Extend CSSProperties in React and Resolve ‘Type ‘{ color

How to Extend CSSProperties in React Project

If you are new to TypeScript and encountering the warning message “Type ‘{ color: string; fontSize: string; fontWeight: number; }’ is not assignable to type ‘CSSProperties’.” while using inline styles in your React component, this troubleshooting guide is for you.

Understanding the Error Message

TypeScript expects specific types for CSS properties, such as "flex" and "column". However, by default, it receives a broader and less descriptive string type for these properties. This causes the type mismatch error.

Here’s an example of a similar error:

const value: string = "flex";
const a: "a" = value; // Errors, `string` cannot be assigned to the more specific `"a"`

Solution 1: Using as const

A more elegant solution is to use as const for your inline styles. This approach treats your object values as their specific literal types. Make sure to update your TypeScript version to use this feature.

const styles = {
    promAlert: {
        display: 'flex',
        flexDirection: 'column',
    },
} as const;

Solution 2: Explicitly Defining Styles Type

An alternative approach is to explicitly define the type for your styles using the React.CSSProperties interface. This provides autocomplete functionality for each property and ensures type checking.

const promptAlert: React.CSSProperties = {
    display: 'flex',
    flexDirection: 'column'
}

const styles = {
  promptAlert,
}

Solution 3: Using Value Literals with Type Assertion

Another way to address the issue is by using value literals and type assertions. This method informs TypeScript that the values are literals and should be treated as such.

const styles = {
    promAlert: {
        display: 'flex' as 'flex',
        flexDirection: 'column' as 'column'
    }
};

Conclusion

By implementing one of the solutions mentioned above, you can eliminate the Type '{ color: string; fontSize: string; fontWeight: number; }' is not assignable to type 'CSSProperties' warning and ensure that your inline styles are compatible with the expected types in your React component.

Remember to choose the solution that best fits your specific situation and codebase.

reference : 

reactjs