Trouble with "textTransform" in Material UI and Typescript when using makeStyles or createStyles with props

Recently, I encountered an issue with typescript that involves the textTransform: 'none' property throwing an error.

const useButtonStyles = makeStyles((theme: Theme) => createStyles({
  // @ts-ignore
  root: (props) => ({
    boxShadow: 'none',
    textTransform: 'none',
    borderRadius: 3,
    border: '1px solid',
    backgroundColor: theme.palette[props.color].main,
    borderColor: theme.palette[props.color].main,
    color: theme.palette.getContrastText(theme.palette[props.color].light),
    '&:hover': {
      backgroundColor: theme.palette[props.color].light,
      borderColor: theme.palette[props.color].light
    },
    '&:active': {
      boxShadow: 'none',
      backgroundColor: theme.palette[props.color].light,
      borderColor: theme.palette[props.color].main
    },
    '&:focus': {
      boxShadow: `${fade(theme.palette[props.color].light, 0.25)} 0 0 0 0.15rem`
    }
  }),
}));
typescript

Answer №1

Fixing the issue by simply adding any to props.

const useButtonStyles = makeStyles((theme: Theme) => createStyles({
  root: (props: any) => ({
    boxShadow: 'none',
    textTransform: 'none',
    borderRadius: 3,
    border: '1px solid',
    backgroundColor: theme.palette[props.color].main,
    borderColor: theme.palette[props.color].main,
    color: theme.palette.getContrastText(theme.palette[props.color].light),
    '&:hover': {
      backgroundColor: theme.palette[props.color].light,
      borderColor: theme.palette[props.color].light
    },
    '&:active': {
      boxShadow: 'none',
      backgroundColor: theme.palette[props.color].light,
      borderColor: theme.palette[props.color].main
    },
    '&:focus': {
      boxShadow: `${fade(theme.palette[props.color].light, 0.25)} 0 0 0 0.15rem`
    }
  }),
}));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error occurs when using JSON.stringify with a Typescript array map

When running this code snippet in Typescript: [].map(JSON.stringify); An error is being thrown: Argument of type '{ (value: any, replacer?: ((key: string, value: any) => any) | undefined, space?: string | number | undefined): string; (value: a ...

typescript

Steps for creating a table with a filter similar to the one shown in the image below

https://i.sstatic.net/zR2UU.png I am unsure how to create two sub-blocks within the Business A Chaud column and Potential Business Column. Thank you! I managed to create a table with input, but I'm struggling to replicate the PUSH & CtoC Column for ...

javascripthtmlangulartypescriptangular-material

A guide to efficiently utilizing conditional dynamic import within a React application

Currently, I am working on a component that receives an array of strings as props. The goal is to iterate over each string in the array, capitalize it, and then dynamically import JSX elements from the "react-icons/si" module. While I have successfully acc ...

reactjstypescriptimport

ReturnType doesn't capture the return type of functions that return string or number values

I am curious as to why the ReturnType can accurately infer a function's specific return values when an if statement is present, but only determines the type of the value when the function returns a guaranteed string or number. For example, in the fun ...

typescriptstringtypesnumbersreturn

Confused about the functionality of the map feature in Angular

I am new to Angular and currently working on an application that utilizes the typeahead functionality. I have set up a HTTP call through my Express backend on GCP to fetch search results from the TMDB database based on a search keyword. this.http .ge ...

angulartypescripthttpangular-httpclient

Having trouble importing the generated typings file from create-react-app?

I'm embarking on my first journey in creating a typescript react npm module, and there's a hurdle I've hit. As I attempt to import one of the type definitions from the new npm module into my project, VSCode intellisense locates and suggests ...

reactjstypescriptnpmcreate-react-appes6-modules

When is the scrollHeight determined?

I'm currently working on implementing a CSS transition within an accordion element that I am creating with Angular 7. To ensure proper display of the content inside, I have opted to use overflow-y: visible; as I will not be using this element personal ...

javascriptangulartypescript

Challenge with using the React useEffect hook

Incorporating the React useEffect hook into my code has been a bit challenging. Here is how I am attempting to use it: function App() { React.useEffect(() => { console.log('effect working') }, []) return ( <div className=" ...

reactjstypescriptreact-hooksuse-effect

What is the best approach to have a method in the parent class identify the type based on a method in the child class using TypeScript?

I'm faced with a code snippet that looks like this. class Base{ private getData(): Data | undefined{ return undefined } public get output(): Data | undefined { return { data: this.getData() } } } class ...

javascripttypescriptclass

Strategies for implementing recursive component calling while maintaining nested level monitoring in React Native

Within my application, I have two key components: CommentList and Comment. The CommentList component is responsible for rendering comments by calling the Comment component through a map function, which loops ten times. A unique feature of my app is that e ...

javascriptreactjstypescriptreact-nativerecursion

Having trouble resolving TypeScript TS2322 error with Context API + useState hook in your React App?

Currently, I am working on a React Typescript project that utilizes the Context API to pass down a useState hook. export const AppContext = React.createContext(null); function App() { const [value, setValue] = React.useState(3); return ( <Ap ...

typescriptcreate-react-app

Develop a universal function for inserting information into an array within a data set

I need assistance with my Typescript code. I am currently working on a method that pushes data into an array in a mongoose collection. However, the issue I'm facing is that the value is not being passed dynamically to the Key field in the $set operato ...

typescriptmongodbmongoose

Messages for Angular Material Date Picker Min and Max Date Validation

Looking for a way to display validation messages for minimum and maximum date errors in Angular Material Datepicker <input [min]="minDate" [max]="maxDate" matInput [matDatepicker]="picker" [formControlName]="date"> <mat-datepicker-toggle matSuffi ...

angulartypescriptangular-materialangular-material-datetimepicker

Having trouble importing from absolute paths with Typescript and NodeJS?

I've exhausted all my attempts to fix this problem. I'm attempting to import from absolute paths specified in my tsconfig.json In a file within my project, I'm attempting to use import { UserModel } from "model/User"; My tsconfig ...

node.jstypescriptimportpath

Combine two streams under certain conditions using RxJs

When working with streams, I am facing a scenario where I have two server calls to make in order to get the required response. However, if the first call returns data, I do not want to execute the second call. I have been struggling to find the proper comb ...

angulartypescriptrxjs

Can you explain the TypeScript type for the queryKey in React Query?

Currently utilizing react query in conjunction with typescript. What should be the type of arguments passed to the function? export const useIsTokenValid = () => { const { data: token } = useQuery<string | null>(['token'], getToken, { r ...

javascriptreactjstypescriptreact-nativereact-query

What is the best way to adjust the Material Drawer width in Reactjs to match the width of its children?

Currently, I am utilizing the Material-ui Drawer component to toggle the display of content on the right side of the screen. The functionality I am aiming for is that when the Drawer opens, it will shrink the existing content on the right without any overl ...

cssreactjstypescriptmaterial-uidrawer

While translating in Angular's dark mode, I noticed that the background property disappears from the card-content

`I implemented a toggle-switch in my Angular project using <mat-slide-toggle></mat-slide-toggle> to switch between dark mode and light mode. However, when I switch to dark mode and translate my application, the background property of the card-c ...

angulartypescripttoggledarkmode

Methods for verifying an empty array element in TypeScript

How can I determine if an element in an array is empty? Currently, it returns false, but I need to know if the element is blank. The array element may contain spaces. Code let TestNumber= 'DATA- - -' let arrStr =this.TestNumber.split(/[-]/) ...

arraystypescript

Angular2 - Utilizing modules in Angular applications

When importing modules in app.module.ts, the process involves adding a specific entry, as seen below: @NgModule({ declarations: [ AppComponent, HomeComponent, DirectoryComponent, FilterPipe, LoggingService ], imports: [ Forms ...

angulartypescriptangular-module