Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am from the javascript world and am new to typescript . I have a react project written in typescript . I declare an inline style but got the below warning when I use it in a react component:

Type '{ color: string; fontSize: string; fontWeight: number; }' is not assignable to type 'CSSProperties'.
Below is the code for the style declaration.
const styles = {
    promAlert: {
        display: 'flex',
        flexDirection: 'column'
below is the code who uses it. And the warning comes out with this line <div style={styles.promAlert}>.
<div style={styles.promAlert}>
    {alert.substring('promotions.'.length)}
I have searched that the this may be caused by CSSProperties defined in react. I may need to extend this class and add more attributes on it. I wonder how I can do that in my project.
Another question is why CSSProperties doesn't include all supported css keys.
                Usually this error comes when a child component provides styles of different type to a parent component
– Rohith Murali
                Jun 21, 2018 at 4:43
                Each dom should have its own styles and why it needs to be constrained by its parent component?
– Joey Yi Zhao
                Jun 21, 2018 at 5:11
                Sorry, actually i meant the reverse. When we provide a style props from parent to child, and the child has specified a type for that prop, when they dont match, such an error is shown.
– Rohith Murali
                Jun 21, 2018 at 5:13
                Alright, this makes sense but my case is that the child component is div which is a standard html dom. How does it enforce style keys?
– Joey Yi Zhao
                Jun 21, 2018 at 5:50
TypeScript expects specific types "flex" and "column", but without any additional work, it receives string for both, which is too wide and non-descript. You can see the same error happen here:
declare const value: string
const a: "a" = value // errors, `string` can't be assigned to the more specific `"a"`
There are a few solutions here. I think the most elegant one is as const, so it'll treat your object values as their specific literal types. Also make sure your TS version is up to date to use this.
const styles = {
    promAlert: {
        display: 'flex',
        flexDirection: 'column',
} as const
Alternatively, you can declare your style objects separately and have them typechecked by the CSSProperties interface. This gives autocomplete on each property, but this can't (easily) be done as a single full object.
const promptAlert: React.CSSProperties = {
    display: 'flex',
    flexDirection: 'column'
// you can re-assign all of your styles into a single object if you want,
// but I think it would be easier to access `promptAlert` directly at this point
const styles = {
  promptAlert,
Other less ideal solutions:
{ [key: string]: React.CSSProperties }: this doesn't perform type checking on the name of each style, so you can do styles.abcdef without any error
Casting each style as React.CSSProperties: this doesn't catch errors in the styles themselves, e.g. you could typo display: "fleex"
Defining styles type as shown below will preserve type check on your all CSS classes and their properties:
const styles: { [key: string]: React.CSSProperties } = {
    promAlert: {
        display: 'flex',
        flexDirection: 'column'
                A much better solution then accepted one. It will avoid writing cast multiple types in the object.
– Abhilekh Singh
                Mar 1, 2020 at 5:14
                I just tried this approach but it doesn't have any effects on my code. I still see the warning.
– Joey Yi Zhao
                Jun 21, 2018 at 6:09
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.