css-modules-typescript-loader icon indicating copy to clipboard operation
css-modules-typescript-loader copied to clipboard

Question: use generated TypeScript declaration in my React component.

Open sergiop opened this issue 6 years ago • 2 comments

Hi, I'm a Typescript newbie and I have a question not strictly related to this project: I used css-modules-typescript-loader to generate TypeScript declarations:

I have got this structure:

src/Components/MyComponent
├── MyComponent.module.css        // Css modules styles
├── MyComponent.module.css.d.ts   // Autogenerated style type declarations
└── MyComponent.tsx               // The React component

Inside MyComponent.tsx I have a function myFunc passing as a parameter styles object, in this way:

import React from 'react'
import styles from './MyComponent.module.css'

const myFunc = (styles, otherParam) => {...}

const MyComponent: React.FunctionComponent<ButtonProps> = (props) => {...}

Is it possible to import Interface from MyComponent.module.css.d.ts adding types like:

import React from 'react'
import styles from './MyComponent.module.css'

const myFunc = (styles: CssModuleInterface, otherParam: string): string => {...}

const MyComponent: React.FunctionComponent<ButtonProps> = (props) => {...}

How can I do it?

sergiop avatar Oct 03 '19 12:10 sergiop

You can do typeof styles instead of CssModuleInterface.

mattpocock avatar Jun 06 '20 12:06 mattpocock

import styles from "./style.module.scss"

export function getStyles<iCSS extends {}>(overrides: iCSS = {} as iCSS) : iCSS & typeof styles {
    return {
        ...styles,
        ...overrides
    }
}

Works perfectly. Thanks!

RichardTMiles avatar Aug 24 '22 23:08 RichardTMiles