Is there a way to customize the default MuiCheckbox icon in theme.ts?

How can I customize the icon default prop for Mui checkbox? I followed the instructions provided here and used a snippet from the documentation:

const BpIcon = styled('span')(({ theme }) => ({
  borderRadius: 3,
  width: 16,
  height: 16,
  ...
}));

const theme = createTheme({
  components: {
    // Name of the component
    MuiCheckbox: {
      defaultProps: {
        icon: <BpIcon />,
      },
    },
  },
});

However, I encountered the following error:

./src/theme.ts
Error: error: Expression expected
  
   |
81 |         icon: <BpIcon />,
   |                       ^

I also attempted to pass icon: BpIcon but received the following error:

Unhandled Runtime Error
RangeError: Maximum call stack size exceeded

Call Stack
Module.default
webpack-internal:///./node_modules/@babel/runtime/helpers/esm/extends.js (3:43)
deepmerge
node_modules/@mui/utils/esm/deepmerge.js (8:33)
eval
node_modules/@mui/utils/esm/deepmerge.js (19:0)

Could someone provide guidance on what mistake I might be making? Thank you!

typescriptmaterial-uinext.js

Answer №1

To implement custom icons, you can modify your theme.ts file by changing it to theme.tsx, and then insert the code snippet below:

    const theme = createTheme({
        components: {
            // Specify the component name
            MuiCheckbox: {
                defaultProps: {
                    icon: <BpIcon />,
                },
            },
        }
    });

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

Is there a way to prevent nesting subscriptions in rxjs?

Currently, I am working with a code that contains nested subscribes: .subscribe((data) => { const { game, prizes } = data; this.ticketService.setListOfTickets(game.tickets); this.ticketService.getListOfTickets() .subscribe((data: any) => { ...

angulartypescriptrxjs

Error displaying messages from the console.log function within a TypeScript script

My node.js application runs smoothly with "npm run dev" and includes some typescript scripts/files. Nodemon is used to execute my code: This is an excerpt from my package.json file: { "scripts": { "start": "ts-node ./src/ind ...

node.jstypescriptnpmnodemon

Steps for incorporating jQuery files into Angular 4

As a beginner in Angular 4, I am faced with the challenge of calling a jQuery function using an HTML tag from a method. The jQuery method is located in a separate file. How can I incorporate this into my Angular project? Here's an example: sample() { ...

jqueryangulartypescript

React-bootstrap-table Axios delete operation causing [object%20Object] to be displayed in the browser console

I am having trouble executing a delete operation using axios on a react-bootstrap-table, and encountering this error in the console DELETE http://localhost:9000/api/terminals/[object%20Object] Uncaught (in promise) Error: Request failed with status cod ...

javascriptreactjstypescript

Tips for managing update logic in the server side with sveltekit

Currently, I am using Sveltekit and I am facing a dilemma regarding updating input data. The actual update process is straightforward, but there is an issue that arises when trying to send an update API request immediately, as it requires an accessToken to ...

typescriptaccess-tokenpatchsveltekitcookie-httponly

Ways to ensure that when changes occur in one component, another component is also updated

How can I update the cart badge value in the navbar component every time a user clicks the "Add to Cart" button in the product-list component? The navbar component contains a cart button with a badge displaying the number of products added to the cart. n ...

htmlangulartypescript

Encountering a ReferenceError when trying to import Recoil into a nextjs app using tsx

I am currently learning how to use Recoil for state management in my NextJS app with TypeScript (tsx). Unfortunately, I'm facing an issue and would greatly appreciate any suggestions or help to resolve it. If you need more details from me, please do ...

reactjsnext.jsrecoiljs

Prevent AppBar color change while scrolling in Flutter Material3

Is there a way to disable the appbar color change when using Material3 in Flutter version 3.0.1 and setting useMaterial3: true? Specifically, in scenarios such as scrolling through a listview. For a similar discussion on native android, check out this lin ...

fluttermaterial-ui

Is Next.js the Ultimate Serverless Rendering Tool with Cloudflare Workers?

I am currently using Next.js version 9 and I am interested in utilizing Next's serverless deployment feature by integrating my application with Cloudflare Workers. According to the documentation for Next.js, all serverless functions created by Next f ...

javascriptnode.jsreactjsnext.jscloudflare-workers

The movement of particles in tsparticles experiences interruptions when built in React, causing defects in their motion or noticeable stutter and lag

The performance is flawless in development mode with npm run start, but once deployed and running the production build (npm run build), there seems to be a disturbance in particle movement or a drastic decrease in speed. Despite experimenting with all ava ...

reactjstypescriptnpmparticles

Storing the response data in the cache of a NextJS API route

Currently, I have an API route set up in NextJS that follows these steps: Fetches news data from a third-party source using the "fetch" method Makes a call to Google Translate to convert the fetched data (also using fetch) Returns the translated data The ...

next.jscaching

Update the value of a TextField when a button is clicked

Trying to update the TextField value when a button is clicked. The issue encountered is: Error: Exceeding re-renders. React restricts the renders to avoid infinite loops. Suspecting it's related to the onclick functions in the Buttons. Is there a be ...

reactjsmaterial-ui

Retrieving an element by its id in Angular 2

Hi there, I'm having some trouble with a code snippet: document.getElementById('loginInput').value = '123'; When trying to compile the code, I keep getting this error message: "Property value does not exist on type HTMLElement ...

javascriptangulartypescript

Guide to crafting a reply using nestjs exception filters with nestfastify

I'm facing a challenge with writing custom HTTP responses from NestJS exception filters. Currently, I am using the Nest Fastify framework instead of Express. I have created custom exception filters to handle UserNotFoundException in the following mann ...

javascripttypescriptnestjsfastifynestjs-config

How can I align the title, image, and description in each row using Material UI?

I need help aligning the title, image, and description of each card within a row in my React app. The current display is not properly aligned: https://i.stack.imgur.com/GILJM.png The child elements within the card are misaligned. To view the code, click ...

reactjsmaterial-ui

Commit to calculating the total sum of each element using AngularJS

Trying to implement a like counter using Facebook's GRAPH API. I have a list of object IDs and for each ID, I make an API call to retrieve the number of likes and calculate a total. The issue arises as the API call returns a promise, causing only one ...

angulartypescript

Arranging Pipe Methods in RxJS/Observable for Optimal Functionality

In the class Some, there is a method called run that returns an Observable and contains a pipe within itself. Another pipe is used when executing the run method. import { of } from 'rxjs'; import { map, tap, delay } from 'rxjs/operators&ap ...

angulartypescriptrxjs

React Native is throwing an error message saying that the Component cannot be used as a JSX component. It mentions that the Type '{}' is not assignable to type 'ReactNode'

Recently, I initiated a new project and encountered errors while working with various packages such as React Native Reanimated and React Navigation Stack. Below is my package.json configuration: { "name": "foodmatch", "version ...

typescriptreact-nativevisual-studio-codenpmintellisense

The looping dilemma in NextJs ClerkJS

Whenever I click on Google and log in using ClerkJS, I encounter this message. Upon clicking "Get Started," I am directed to ClerkJs, where I am then redirected to the Gmail login page. Once I successfully log into my Gmail account, it should automaticall ...

authenticationnext.js

In a Next JS project, the CSS Transition fails to activate when a class is dynamically added

In my Next.js project with Tailwind styling, I encountered an issue when using the globals.css file for more complex non-Tailwind CSS styling on a component. To better understand the problem, you can view the Code Sandbox here: https://codesandbox.io/p/sa ...

cssreactjsnext.jstailwind-css