Issue everyone! I use react and material ui library. I want to handle click event and long-press event separately. I think problem related to async set state, but for now, I don’t know how to handle this events const [isCommandHandled,
Continue readingTag: material-ui
How to fix the design of the Header on dataTable while Draging
Issue i’m setting a reorder-able table, Using { mat-table , MatTableDataSource } but when i drag a column i want it’s place to have a white background color not transparent. Can this be done? Exemple Picture link : https://imgur.com/taDJF17 <table
Continue readingMaterial UI Theme Overrides how to correctly update gap between label and input
Issue I’m trying to update my MUI themes using the overrides functionality. This is what I have for my input field: I want to increase the gap between the label and the input field. This is the overrides code that
Continue readingHow to override classes using makeStyles and useStyles in material-ui?
Issue Consider a component that renders a button and says this button should have a red background and a yellow text color. Also there exists a Parent component that uses this child but says, the yellow color is fine, but
Continue readingHow to override Material UI .MuiContainer-maxWidthLg?
Issue I’m trying to get rid of max-width that present in the theme. This is what I see in Chrome (and if I uncheck it, it does what I need): @media (min-width: 1280px) .MuiContainer-maxWidthLg { max-width: 1280px; } How can
Continue readingMaterial styling not loading in production build
Issue I’m currently working on a project with Nextjs and Material UI. Everything works great in development mode. When I build the project, the first page loads just fine but when I navigate to a second page, a lot of
Continue readingAngular select list multiple selection with no checkbox not working properly
Issue Im doing a list of selectable items and checkbox should not be visibile. Demo : https://stackblitz.com/edit/mat-selection-list-get-options-gcsdjd?file=src%2Fapp%2Flist-selection-example.css,src%2Fapp%2Flist-selection-example.ts Background field when items selected its not working properly Solution I think what happens in your CSS is that mat-list-option:hover and mat-list-option:focus styles
Continue readingInteresting Css rendering issue on zoom : browser renders a space gap between containers while zooming, occurs in every browser, but not in Firefox
Issue I have both interesting and strange issue with css styles and zooming in and out in browser. I created a material ui card with which have its background-color changed on click with animation. Animation works fine, but if you
Continue readingHow to make the whole Card component clickable in Material UI using React JS?
Issue Im using Material UI Next in a React project. I have the Card component which has an image(Card Media) and text(Card Text) inside it. I also have a button underneath the text. My question is..how to make the whole
Continue readingMaterial UI Styled() – How to style Child components
Issue Background So I use the styled() utility function exposed by Material UI to style my components. Let’s say I have a base component called Child and I import the base component into another React component. Now, if I am
Continue readingHow to enlarge the SVG icon in material-ui iconButtons?
Issue Has anyone build webpages using react.js and the Material UI library? How should I resize the icon size? It is a svg icon. I just built an “create new” component, which is a piece of material paper with a
Continue readinghow can I add row and columns in table heading in react material UI
Issue I am new to material UI and I am struggling to add columns in the table heading, I have provided an image I am trying to do like this, under the Economics there will be 3 columns also each
Continue readingMUI5 custom typography typescript guide incorrect?
Issue I’m trying to setup custom typography variants in MUI5 by following this guide https://mui.com/customization/typography/#adding-amp-disabling-variants. When I add the type definitions in step 2 declare module ‘@mui/material/styles’ { interface TypographyVariants { poster: React.CSSProperties; } // allow configuration using `createTheme` interface
Continue readingWhat do multiple css classes do?
Issue My application uses multiple classes using CSS modules. open is a boolen variable to determine if Paper should shift or not. <Paper className={`${classes.paper} ${open && classes.paperShift}`}> Question: Why are multiple classes being used, and how can they render differing
Continue readingTernary Operator for PaddingLeft with MUI
Issue In my application, I want the paddingLeft of the container to change if the side nav menu is selected open or closed. There is a variable open that determines if the side nav is open. What I tried: When
Continue readingAccordions in a Grid pushing content down
Issue I have a grid of accordions like in the codesandbox below. The problem is when I open one of the accordions, it pushes down all the accordions in the row below, whereas the desired behaviour is to just push
Continue readingMaterial-ui drawer width issue
Issue I’m facing an issue with material-ui drawer. I’ve changed the width of the drawer container which causes a a problem . The drawer remains a little inside the page and visible but I don’t want to make it visible
Continue readingMUI: div height – expand to fit content
Issue I’m using MUI to style a React app. I’m stuck on how to best set a div’s height to expand with the content. In the example below, I have a Card containing a Button. When the Button is clicked,
Continue readinghow to support same column size when screen size reducing in angular material table
Issue I do have material table where I am using the 9 columns, I would like to maintain same column size even if the screen reduces. Currently, When I reduce my screen last column is shirking first which looks bit
Continue readingUsing createMuiTheme to override default styles on div's, p's, body
Issue This is perhaps a simple Material UI Theme Customization question. What I want to do is to override the default styling on <body> (and other common tags in the future). Right now at the root of my React tree:
Continue readingreact material-ui how to override muibox-root
Issue I want to override the MuiBox-root style for the whole application.According to the official documentation I need to identify the class: And among other things I can override it: But if I proceed this way, it just removes the
Continue readingNext.JS: Cannot find module '@emotion/react'
Issue I’ve been using Next.JS to make a test project to learn the framework. So far so good until I decided to use MUI to create a table so using npm I installed @mui/material @emotion/react and @emotion/styled but when it
Continue readingCan't assign type any to string in Typescript, but i am trying to assign a string value
Issue I am a newbie in typescript and learning about how types work in Typescript. I am also using MaterialUIin this project. I am getting an error saying I am trying to assign an any value to a string variable.
Continue readinghow do you find app bar height in react material ui app?
Issue I would like to create an image that spans the whole screen when first opening my website. I am using react and material ui. Currently my JSX looks like roughly like this. I have used the default material ui
Continue readingCannot read properties of null (reading 'pulsate') in material-ui Button component
Issue This is version of material-ui that I am using : "@mui/icons-material": "^5.5.1", "@mui/material": "^5.5.1", This is how I imported Button component : import Button from "@mui/material/Button"; This is how I am using Button : <Button variant="contained" className={styles.contactBtn} autoFocus onClick={handleClose}
Continue readingHow to disable the Material UI Link API component
Issue I was previously using Material UI’s Button component, which has the disable property. Basically that prop allows the button to be disabled based on a boolean. So if true, then it is disabled. However, now I want to switch
Continue readingReact and Mui, background is missing on component in one location, same implement
Issue React 16 – functional components w hooks Mui 4 – We have a few different login pages and i am adding a simple background pattern to the page behind the login. easy peas right? here is what one login
Continue readingHow can I change a width of table Material UI / React?
Issue I’m making an application with React.JS and Material UI. I use the table component for my application. I could change the width of column but I cannot change the width of table. The width of table should be as
Continue readingType error: Type '(e: ChangeEvent<{ value: string[] | unknown; }>) => void' error while building the project
Issue I’m relativelt new to react. I have a project, and it has several components, and among these components is this CustomeMultiSelect component. I call these events in another component, but when I write the code, I have this one
Continue readingConvert Style ts file from Material V4 to V5
Issue I am trying to migrate from material v4 to v5, the issue i am facing is previously I had a styles.ts file that I would import into my component and the start of the class looked like this: import
Continue readingMUI – What is newValue in the handleChange function?
Issue I have this example code from MUI Tabs (https://mui.com/material-ui/react-tabs/#BasicTabs.tsx). The full code is below. My question is, what is the newValue in this code? Which value is it reading and where did it come from? It throws an error
Continue readingWhat the notched property is supposed to do in Material-UI
Issue I’m using Material-UI for a project and I’m going through their API. However, I don’t understand the notched property in the OutlineInput Component <FormControl variant=’outlined’> <OutlinedInput notched={false} /> </FormControl> Switching the notched property from false to true doesn’t change
Continue readingHow to use material-ui TextField with react-phone-number-input
Issue I’d like to supply a material UI TextField component to the PhoneInput component from react-phone-number-input as the inputComponent prop. However, I don’t seem to be able to successfully apply the ref. Although I see the Material UI TextField component
Continue readingStyling reacts material-ui tabs
Issue I just started to use reacts material-ui and I would like to customize some styles. For example changing tabs background color. trying to use inlineStyle like <Tabs style={this.getStyles().tabs} > </Tabs> getStyles(){ return { tabs: { backgroundColor: Colors.teal200 }, headline:
Continue readingChange color of Material UI Select component border not working
Issue I am using material-ui v5 for learning purposes. I am facing difficulty overriding the default style of the mui Select component. I want to change the color of Select when hovering over it and also in a focused state.
Continue readingValidate email address within autocomplete field
Issue I’m using Material UI to create an autocomplete field with multiple inputs which allows the user to either select an existing email address, or enter in their own. For example, something like this: Right now, the user can enter
Continue readingMaterial UI Homepage Theme?
Issue I have attached an image of the demo that is displayed on the main page for Material UI. I really like this theme and I want to use one like it with MUI to create my web application. Is
Continue readingDevOps Typescript Build Issue with Material Ui Box Element
Issue I have a build pipeline in Azure DevOps that I am attempting to build a front end React Typescript application with. This application uses Material ui and the issue seems to be with the code for that library. I
Continue readingCoordinate overlapping components to scale together
Issue Attempting to create a higher-order component with two components that scale together. The higher-order component is set up as so: <> <Component 1/> <Component 2/> </> The css for Component 1: { height: 735px; background-image: url(url); } and for
Continue readingTyping multiple MUI themes via module augmentation
Issue I want to setup two directories in one repository (with one package.json and tsconfig.json) which both will use MUI and TypeScript. Each of these directories will use its own theme (so one ThemeProvider in each root). In the main
Continue readingReact – Material UI grid items center issue
Issue I am unable to center the elements group using material ui grid system. Issue: The margin space on the exteme right. Code: const renderProjects = projects.map(project => ( <Grid item xs={12} sm={6} m={3} lg={3} key={project.title}> <ProjectCard title={project.title} description={project.description} image={project.image}
Continue readingMUI : Module not found "Module not found: Error: Can't resolve 'moment' "
Issue Getting multiple errors of this sort, while trying to use date-picker from mui-x. Module not found: Error: Can’t resolve ‘moment’ Can’t resolve ‘@mui/x-date-pickers/LocalizationProvider’ Module not found: Error: Can’t resolve ‘../internals/hooks/useUtils’` and many more. I have done npm install @mui/x-date-pickers
Continue readingHow to default select mui togglebutton on dynamic data
Issue I wanted to select the first toggle button by default import * as React from "react"; import { Typography, ToggleButton, ToggleButtonGroup } from "@mui/material"; export default function ToggleButtons() { const data = [ { name: "a", title: "hello1" },
Continue readingControl the width of menu component in Material-UI
Issue I’m trying to implement a menu item with a login form in it. It works but the width is too small. Is there a way to change it? I couldn’t find anything in the documentation about it. import React
Continue readingdisable Appbar paddings from top and bottom
Issue I want to make a box inside the Appbar that takes the full height, as demonstrated below: However, the Appbar by default is giving padding from the top, bottom, left, and right to the inner elements, which is resulting
Continue readingToggle between useState using Switch from MUI
Issue trying to build my own Dark Mode for a specific component on my create-react-app site and using MUI. I have the Switch working to change the state on toggle but can’t seem to find how to toggle it back
Continue readingMUI Progress Indicator center align horizontally
Issue Stack: Meteor + React + MUI Here’s my full code of my ‘main’ renderer components: // Sorry for not giving material-UI CSS, // cause it cannot be served as stand-alone CSS render() { return ( <div className = "container">
Continue readingMaterial UI styled() utility – How to recursively change highlighted text background color
Issue Background So I want to style my component and all its children with a text highlight color to be yellow for example. But I am only able to do it if the component returns the text wrapped within the
Continue readingHighlight React Material UI TextField "Cell" inside of a React Material UI Table?
Issue I’m using React Material UI with TypeScript and I have a Material UI Table with a column of Material TextFields in each row of that column. Now when the user inputs text into the TextField…I want to "highlight" the
Continue readingHow to handle events on the extra space in a flexbox?
Issue How to handle the events when someone clicks(mouse click) on the violet color space around the elements ? Putting a general onclick on the container is overriding the individual item behaviors (they all have their internal onclick handlers). Any
Continue readingError while trying to install mui core with npm
Issue I just deployed a new create-react-app and still receiving this same error message. I installed MUI and am receiving a ‘unable to resolve dependency tree’ npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR!
Continue readingHow to mock x-date-pickers from mui in jest?
Issue I added a DateTimePicker to my app which seems to work, however, I’m unable to mock the picker in my Jest tests. I keep getting the following error: Test suite failed to run TypeError: (0 , _material.generateUtilityClasses) is not
Continue readingReact Material UI tree view – Getting root node info on child node onNodeSelect
Issue I have a tree view code like below <TreeView defaultCollapseIcon={<ArrowCircleUpIcon />} defaultExpandIcon={<ArrowCircleDownIcon />} onNodeSelect={handleChange} sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: ‘auto’ }} > {loop(values)} </TreeView> And the handleChange method like below const handleChange = async (event, node)
Continue readingReact Send Data from Child to Parent with Typescript
Issue I am trying to send data from Child Component to Parent component, using Typescript. There are lot of resources, but many don’t explore typescript concept. On the Parent, how would I set the ProductType event? Is this the proper
Continue readingHow to handle Typescript Generics when using styled function from '@mui/material/styles'
Issue import Table,{TableProps} from ‘my/table/path’ const StyledTable = styled(Table)({ …my styles }) const AnotherTable = <T, H>(props: TableProps<T, H>) => { return <StyledTable {…props} /> } This is my error message: Types of parameters ‘item’ and ‘item’ are incompatible. Type
Continue readingcolor change for the loading bar component of material ui
Issue I am trying to learn material ui. I am trying to change the css of the loading bar. I referred to the documentation and used colorPrimary classes but its not changing. can you tell me how to fix it
Continue readingReact/Material UI: css content property
Issue I want to set content: "" on my i element: "& i::before": { content: "" }, "& i::after": { content: "" }, The style is not applied and when I look in devtools I get invalid property value: When
Continue readingCannot Link to part of page with MUI 5 Drawer
Issue I’m simply trying to link to a specific part of my first page when the user clicks on the Shop button in the navigation Drawer but it doesn’t do anything at all: This is the code for the MUI
Continue readingAdd custom style inside DataGrid Toolbar's popup component Material-UI
Issue I’m creating a custom Data Grid Toolbar component by modifying existing Grid Toolbar components from Material-UI. Here is the official example for the Grid Toolbar components: If we click one of the Grid Toolbar components, it will show a
Continue readingHow to move Icons in Material UI
Issue How can I move my components on the image by using material UI ? I want to move my heart component to the top right corner of my image and ratings on the bottom of my image. import image
Continue readingHow to change the font size of Chip of Material-UI
Issue I have Chip widget const styles = { root:{ }, chip:{ margin: "2px", padding: "2px" } } const SmartTagChip = (props) =>{ const classes = useStyles(); return( <Chip style={{color:"white"}} clickable className={classes.chip} color="default" label={item.label} variant="outlined"/>: ) } I want to
Continue readingWhy doesn't the style in my PaperProps within the MenuProps of my Select apply to the select
Issue The white padding in this select won’t disappear and I feel like I’ve tried 30 variations and places to make the css stop showing up. Any advice? This is using MUI 5, and I even tried basing it off
Continue readingAdd a unique ID to each menu item in Material UI TablePagination
Issue Is it possible to add a unique ID to each menu item that is rendered using <TablePagination >? I want to add a unique ID (for example: id="menu_item_0", id="menu_item_1" & id="menu_item_2") to these (10, 25, 100) menu items, which
Continue readingMaterial UI InputAdornment icon placement is outside the input area of TextField
Issue I can’t figure out how my InputAdornment is getting improperly placed. I can’t see anything in my styles that would influence the position of the icon within the TextField (e.g. padding, flex stuff). How it currently looks – calendar
Continue readingElement touching the edge of the screen on mobile (Material UI)
Issue New to MUI. My element seems to be touching the edge of the screen on mobile. I tried adding padding and margins but it just squeezes the element. https://codesandbox.io/s/proud-architecture-69b0jv?file=/App.js:2727-3108&resolutionWidth=748&resolutionHeight=675 (Paper element is on line 94) <Paper sx={{ pt: 1,
Continue readingDynamically drawing multiple borders with MUI
Issue I am using React 17 and MUI 5.6. I have a component that needs to add new borders to the parent container based on user input. I found some non-MUI CSS tutorials for achieving what I want, but their
Continue readingTypes of parameters 'event' and 'event' are incompatible
Issue I have a project, which is an employee monitoring project, and it has several components, and among these components is having a group of buttons together. I have a set of buttons, and I call these buttons in another
Continue readingDynamically drawing multiple borders with MUI
Issue I am using React 17 and MUI 5.6. I have a component that needs to add new borders to the parent container based on user input. I found some non-MUI CSS tutorials for achieving what I want, but their
Continue readingWhat is the way to color the Autocomplete chips in MUI reactjs
Issue I have been trying to color the Autocomplete from MUI like the way i have described below based on some if conditions. Couldn’t find a way to do it. Solution Autocomplete component has renderTags property which takes an array
Continue readingKeeping content inside modal box
Issue I’m attempting to create a month calendar pop-up inside my app using a material UI Modal where you can select the day. I’m running into an issue where the modal does not fit the size of my calendar. how
Continue readingHow to override Material UI .MuiContainer-maxWidthLg?
Issue I’m trying to get rid of max-width that present in the theme. This is what I see in Chrome (and if I uncheck it, it does what I need): @media (min-width: 1280px) .MuiContainer-maxWidthLg { max-width: 1280px; } How can
Continue readingFit parent height for Table in Material UI?
Issue I want the table height to fit the parent’s available height. Ideally, I want: The footer to always be docked at the bottom of the parent container. If the table contains a few rows, the footer should remain docked
Continue readingHow to align a Material UI Button and TextField on the same line, at same height?
Issue I’m trying to get a <Button> from the Material UI library to a) sit at same height as the <TextField> next to it; and b) have it be aligned with that same field. Both the <Button> and the <TextField>
Continue readingURL changes set by react-router-dom 'useSearchParams' are not maintained when set by mui 'Tabs' component's onChange callback
Issue I would like to set a tab navigation component based on the search parameter named tab. If my url is example.com?tab=test2, I would like my navigation bar to display the test2 item as selected. I’m using mui Tabs component
Continue reading(MUI v5) Unable to place button on the top right corner
Issue I tried to place a MUI button on the top right corner, for some reasons I was not able to move the button at all unless using ml & mr, which is not the ideal case for my project.
Continue readingAdd a unique ID to each menu item in Material UI TablePagination
Issue Is it possible to add a unique ID to each menu item that is rendered using <TablePagination >? I want to add a unique ID (for example: id="menu_item_0", id="menu_item_1" & id="menu_item_2") to these (10, 25, 100) menu items, which
Continue readingElement touching the edge of the screen on mobile (Material UI)
Issue New to MUI. My element seems to be touching the edge of the screen on mobile. I tried adding padding and margins but it just squeezes the element. https://codesandbox.io/s/proud-architecture-69b0jv?file=/App.js:2727-3108&resolutionWidth=748&resolutionHeight=675 (Paper element is on line 94) <Paper sx={{ pt: 1,
Continue readingTypescript – 'No overload matches this call' when using fetched data and material-ui
Issue I practiced creating a dropdown menu with hardcoded array before trying to create a dropdown menu with an array retrieved with useSWR. I used this for the first practice: https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045 Instead of using the hardcoded names variable,I saved a
Continue readingTypescript Equality issue on Material UI Autocomplete
Issue Data is stored as: { iso: “gb”, label: “United Kingdom”, country: “United Kingdom” }, { iso: “fr”, label: “France”, country: “France” } Value passed to the Autocomplete is: { iso: “gb”, label: “United Kingdom”, country: “United Kingdom” } Error
Continue readingBroken nested tree angular mat tree
Issue I have difficulty in solving UI issue of expanding tree on the last node it always giving excessive line from the node just like the picture below. I tried to reduced the the left border height but it still
Continue readingHow to distinguish two mat-table (Angular UI) in same component
Issue I use two mat-table in the same component and now renderRows() not working for the second table. @ViewChild(MatTable) tagsTable: any; @ViewChild(MatTable) serviceAreaTable:any; this.tagsTable.renderRows(); #Work fine. this.serviceAreaTable.renderRows(); #Not Work Solution You can use template selectors to distinguish your elements <table
Continue readingResolving multiple versions of React in component library built with Webpack and Storybook
Issue I’m trying to build a React component library built on top of MUI and using Storybook and TypeScript. Because Storybook (which uses create-react-app) is based off of Webpack, and because my component library includes SASS files that can’t be
Continue readingHow to center the text in MUI Breadcrumbs
Issue I am using MUI Breadcrumb in my Code. I want to center the Content in Breadcrumb. I Try this code <BreadcrumbStyle style={{marginTop:30}}> <Card elevation={3} style={{padding:10}}> <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="breadcrumb" > <Link underline="hover" color="inherit" href="/" sx={{ display: "flex", alignItems:
Continue readingAdd text in border of a chip Material UI
Issue I need to create this style with a Chip component pre build with MaterialUI with html and css the solution will be using Some Text but even there the result will not be the same, I saw some example
Continue readingCreate backdrop of Material Design for Angular
Issue I’m starting a new project with Angular 13 and Angular Material. I want to use a Backdrop element like it is defined in Material Design (Material Design Backdrop) but I can not find a component in the Angular Material
Continue readingHow change the size of UI Chip dynamically
Issue In the following example, I am trying to change the size the UI chip in dynamically in order to respond to the font size of its parents using the em css unit. My goal: I want to do something
Continue readingMUI Autocomplete Typescript: What is the type of PaperComponents function parameter
Issue MUI’s Autocomplete has a property PaperCompomponent that allows you to pass your own react component. The property is a function that has properties as a parameter that can be used to pass it on to your component. In Typescript,
Continue readingMaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')
Issue After I created ThemeSetting.tsx context I cannot use <Button><Button> and all things that use theme of materialUI ReactJS , Typescript error TypeError: Cannot read properties of undefined (reading ‘create’) push../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState node_modules/@mui/material/Button/Button.js:67 64 | minWidth: 64, 65 | padding: ‘6px
Continue readingMaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')
Issue After I created ThemeSetting.tsx context I cannot use <Button><Button> and all things that use theme of materialUI ReactJS , Typescript error TypeError: Cannot read properties of undefined (reading ‘create’) push../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState node_modules/@mui/material/Button/Button.js:67 64 | minWidth: 64, 65 | padding: ‘6px
Continue readingMaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')
Issue After I created ThemeSetting.tsx context I cannot use <Button><Button> and all things that use theme of materialUI ReactJS , Typescript error TypeError: Cannot read properties of undefined (reading ‘create’) push../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState node_modules/@mui/material/Button/Button.js:67 64 | minWidth: 64, 65 | padding: ‘6px
Continue readingMUI Autocomplete Typescript: What is the type of PaperComponents function parameter
Issue MUI’s Autocomplete has a property PaperCompomponent that allows you to pass your own react component. The property is a function that has properties as a parameter that can be used to pass it on to your component. In Typescript,
Continue readingMUI Autocomplete Typescript: What is the type of PaperComponents function parameter
Issue MUI’s Autocomplete has a property PaperCompomponent that allows you to pass your own react component. The property is a function that has properties as a parameter that can be used to pass it on to your component. In Typescript,
Continue readingHow can I override styling for ListItemButton when it's selected?
Issue I’m trying to override the existing styling for a button in MUI. This is my first time using MUI, and I installed my project with the default emotion as a styling engine. I tried to use the css() method
Continue readingHow can I override styling for ListItemButton when it's selected?
Issue I’m trying to override the existing styling for a button in MUI. This is my first time using MUI, and I installed my project with the default emotion as a styling engine. I tried to use the css() method
Continue readingBest way to style non-MUI elements in MUI?
Issue I’m new in React and a new dev in general; I know that there are many ways to style elements in React itself: importing CSS, locally scoped CSS modules, CSS-in-JS via Styled Components or Emotion, utility-first CSS like Tailwind
Continue readingHow to style list option in Autocomplete material ui with use of renderOption?
Issue I am trying hard to customize option elements in autocomplete list. I want to do this by use of renderOptions prop, where i can create DOM elements. Then, i can pretty easly add styles with sx or styled components.
Continue readingHow to use Material UI custom variants in React with Typescript
Issue Example with error: https://codesandbox.io/s/flamboyant-lederberg-w16pio?file=/src/App.tsx I am trying to extend from Mui’s types to add a few more variants. I’m already extending from Muis base props. interface IText extends TypographyProps { I’m after avoiding having to manage all of the
Continue readingHow to style list option in Autocomplete material ui with use of renderOption?
Issue I am trying hard to customize option elements in autocomplete list. I want to do this by use of renderOptions prop, where i can create DOM elements. Then, i can pretty easly add styles with sx or styled components.
Continue readingHow to disable linear-gradient added by dark mode theme?
Issue Why MUI add some random gradient to components ( is one of them) in dark mode? Is there a way to disable this because that kinda destroy the purpose of my custom theme since it doesnt reflect the exact
Continue readingHow to disable linear-gradient added by dark mode theme?
Issue Why MUI add some random gradient to components ( is one of them) in dark mode? Is there a way to disable this because that kinda destroy the purpose of my custom theme since it doesnt reflect the exact
Continue reading