css-modules-typescript-loader
css-modules-typescript-loader copied to clipboard
Question: use generated TypeScript declaration in my React component.
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?
You can do typeof styles instead of CssModuleInterface.
import styles from "./style.module.scss"
export function getStyles<iCSS extends {}>(overrides: iCSS = {} as iCSS) : iCSS & typeof styles {
return {
...styles,
...overrides
}
}
Works perfectly. Thanks!