Is there a way to use WithStyles<typeof styles> within Material UI?

Question

Is there a way to use WithStyles<typeof styles> within Material UI?

import { WithStyles, createStyles } from '@material-ui/core';

const styles = (theme: Theme) => createStyles({
  root: { /* ... */ },
  paper: { /* ... */ },
  button: { /* ... */ },
});

interface Props extends WithStyles<typeof styles> {
  foo: number;
  bar: boolean;
}

This code snippet is sourced directly from the Material UI documentation. The question that arises is why the documentation recommends using WithStyles<typeof styles> instead of WithStyles<string>. Can someone please provide a detailed explanation of what exactly the typeof styles evaluates to? Is it just a string as commonly perceived?

reactjs typescript material-ui typescript-typings

Answer 1

Answer №1

Here I seem to have found the solution to my own question.

If we have the following content in a TypeScript file

const styles = {a: 1, b: 2, c: 3};

We can then create another object that should have the same property names as styles by using this syntax:

const stylesV2: typeof styles = {a: 10, b: 20, c: 24}

This way, if a property is missing from stylesV2 but is present in styles, TypeScript will generate an error stating that property "x" is missing and required.

So, when dealing with WithStyles<typeof styles>, we are essentially defining a type based on the current properties included in styles.

Answer 2

Here I seem to have found the solution to my own question.

If we have the following content in a TypeScript file

const styles = {a: 1, b: 2, c: 3};

We can then create another object that should have the same property names as styles by using this syntax:

const stylesV2: typeof styles = {a: 10, b: 20, c: 24}

This way, if a property is missing from stylesV2 but is present in styles, TypeScript will generate an error stating that property "x" is missing and required.

So, when dealing with WithStyles<typeof styles>, we are essentially defining a type based on the current properties included in styles.

Is there a way to use WithStyles<typeof styles> within Material UI?

Answer №1

Similar questions

Using the Context API dispatch (consumer) within the _app.js class component in Next.js

Why styled-components namespace problem in React Rollup build?

Color of the ripple effect on the Floating Action Button

Obtain a collection of strings from an array of objects based on specified criteria

Obtaining a binary value in the switch component of materialize framework with Typescript

Encountering problem with rendering the header in the footer within a customized package built on react

The function "Jest spyOn" does not exist

The BottomNavigation component in MUI has a minimum size limit of 400px when it displays 5 items

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

Nested self-referencing in Typescript involves a structure where

Is it possible for a function within a nodejs module to be defined but display as undefined upon access?

Preact was implemented within the Shadow DOM, but unfortunately, all of the styles were

`Drizzle ORM and its versatile approach to SELECT statements`

Effortlessly transition from displaying text to entering text with ease using Material UI

Placing a new item following each occurrence of 'X' in React components

Tips for modifying the data type of a property when it is retrieved from a function

Keeping calculated values in the React state can cause issues

Display information retrieved from Firebase Firestore within a React component

Include a button alongside the headers of the material table columns

"Troubleshooting Angular 2 Directives That Cause Errors