I am currently trying to implement a custom theme using the following code: import Menu from '@material-ui/core/Menu'; import { createStyles, withStyles, Theme } from '@material-ui/core/styles'; const myMenu = withStyles( ( theme: The ...
I have successfully created a slider with icons using [mui slider][https://mui.com/material-ui/react-slider/]. The icons are added based on user preference through props. However, I am facing an issue where the 'fill: red' property is not renderi ...
Can anyone help me convert this Material-UI example into a Class Component? import React from 'react'; import Button from '@material-ui/core/Button'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@mate ...
https://i.stack.imgur.com/gTKzT.png I'm dealing with a sign out component in my app that requires me to click on it specifically to unselect any part of the application. This is implemented using React Material UI. <MenuItem onClick={e => this.onSi ...
I recently finished building a react app using MUI-5 and everything was running smoothly. However, I've encountered a strange issue where my app refuses to start and I'm bombarded with multiple MUI errors. These errors started popping up after I deleted th ...
Alert: The property readOnly does not match. Server: "" Client: "false" I've attempted to use both Mobile and Desktop devices. const isDesktop = useMediaQuery('(min-width:900px)'); I then decide whether to render a Deskt ...
In the grid container below, an image is positioned on the left with a block of text on the right. There seems to be a large gap between the image and the text that I have attempted to reduce using various methods without success. Any suggestions on how ...
I created a customized Drawer component wrapped with withStyles, which overrides some values in the anchorLeft className. <Drawer anchor="left" classes={{paper: this.props.classes.paper, anchorLeft: this.props.classes.anchorLeft}} ...> Other parts ...
My current setup involves a parent component with a button that triggers the opening of a snackBar from MUI (child component) upon click. To enhance the user experience, my teacher suggested adding a transition effect to the onClick event so that the snack ...
Using react in combination with redux and material-ui, I am working on creating a component. Specifically, I am trying to write an export statement export default connect()(withRouter(FirstPage))(withStyles(styles)(FirstPage)) However, I have encountered ...
Having trouble with my tab component setup. I've created three tabs, each pulling data from different API endpoints. My plan was to use a switch case in the onChange function to make the API calls based on the selected tab. However, I encountered an i ...
Currently, I am facing an issue with assigning default values to a form that utilizes material UI and react-hook-form for managing the form. The problem lies in the fact that select fields do not get assigned values, and even when they do, the labels of Te ...
I'm currently working on customizing a Flutter ElevatedButton within the context of an app that adheres to a specific color scheme created by myself. Is there a way to apply styles to this button using a particular hexadecimal color value (for example, u ...
Is there a way to adjust the number of columns in imageList based on the screen width through a media query? I've been having trouble getting it to work correctly. For instance: <ImageList variant="masonry" cols={{ xl: 3, md: 2, sm: 1 }} gap={ ...
Hey there, I am currently using Material UI in React and noticing that my inputs are smaller than select, which is not the expected behavior - see screenshot here: I have followed the documentation instructions thoroughly, but still facing this issue ...
Here is a sample code snippet for vertical tabs in React using the Material-UI library: import * as React from 'react'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Typography from '@mui/material/Typography'; import Bo ...
Check out these awesome styles I created const customStyles = makeStyles({ button1: { border: 0, position: 'relative', overflow: ' hidden', color: '#FFF', backgroundColor: '#7768F2', '&circle': { position: 'absolute', ...
Currently, I am working with Material Ui for a project where I have a component containing a button. When this button is clicked, I need to navigate to another component within Material Ui. How can I achieve this? I have already installed react-router-dom ...
My current challenge involves utilizing the material-ui library to create an autocomplete feature where each item is clickable and opens a modal window. The basic structure looks like this: const ModalBtn = () => { ... return ( <> ...
I'm attempting to create an autocomplete feature that displays the firstName and lastName of a user on the first line and their id on the second. Here is my current implementation: <Autocomplete freeSolo disableClearable options ...
I've been attempting to include a background image in the Box component of mui, but I can't seem to get it to work. Here is the code I've been using: const Main = () => { return ( <Box sx={{backgroundImage:'images/cove ...
I've been attempting to incorporate a checkbox or dropdown menu into one of the column filters. By using type="boolean" for the columns, I was able to create the dropdown, but it's not displaying the options as I anticipated. Instead of ...
Encountering an issue in Material ui core version 3.9.2 When using inputRef={input => { this.input = input; }} An error is displayed: TypeError: Cannot set property 'input' of undefined If we replace this.input with ...
Struggling to create a scrollable box using flex The Box element with the id=scroll is not behaving as expected, causing content overflow How do I set the Box to overflow=auto and enable scrolling for the content? Spending countless hours trying to unrav ...
I redid the basic popover example from this website, but this time using mouse hover properties: https://codesandbox.io/s/eager-dewdney-yt3v-yt3vb <Button variant="contained" onMouseEnter={e => setAnchorEl(e.currentTarget)} // onMou ...
I have followed all the necessary steps to install materialUI, emotion/react, and emotion/styled in my react app. However, I am encountering an issue where MUI does not seem to work properly. There are no errors displayed on the console or webpage, but not ...
How can I update the value of a TextField using redux-form? My current version includes: "@material-ui/core": "^4.11.0" "redux-form": "^8.3.6" Prior to implementing redux-form, I was able to update the TextFiel ...
When using the <FlatButtin> control (or any other similar control), the click handler or redirection does not trigger immediately. Instead, it waits for the visual "ripple" effect to finish. This delay in user interaction makes the UI I'm devel ...
Receiving an alert message saying: Warning: React does not recognize the 'textColor' prop on a DOM element (all other functionalities are functioning properly). This is how I'm using it in my component: import { ImageWithFallback, Paper, Tabs, Tab, Typogr ...
I recently started using the React-Redux Material-UI package found at http://www.material-ui.com/#/components/dialog My goal is to implement a grey overlay that blankets the entire dialog element, complete with a circular loading indicator after the user ...
Having trouble building a table, everything seems fine with the row data display but I'm encountering a strange issue. When I attempt to add a menu button, it ends up displaying the information from the last row for all the rows in the table. <T ...
One issue that has caught my attention is the fact that every component within the same parent element (App in the example below) seems to rerender when unrelated states/props change, causing noticeable slowdown in the page/forms. Despite following variou ...
I am currently working on implementing the default drop-down menu style for my MUI Select Component. Here is the desired menu appearance: https://i.stack.imgur.com/GqfSM.png However, this is what my current Select Component looks like: https://i.stack. ...
As I've been converting my class components to functions, I encountered a hook error related to my export default. Although I believe it's a simple issue, I can't seem to find the solution I need. The following code is where the error occurs: import React ...
Currently, I am using the following code: import { makeStyles } from '@mui/styles'. Here is my theme typography configuration: enter image description here In this file, I aim to consolidate these 3 attributes into a single line of code. enter i ...
Utilizing ReactJS, I am endeavoring to create a secondary (smaller) navbar in the same style as Airtable's product page. My primary navbar is situated at the top and transitions from transparent to dark when scrolled. The secondary bar (highlighted in ...
I'm currently working on customizing the textfield in materialUI. This is what I am trying to modify. I am facing challenges in changing the color of the span tag that contains the text, and also in maintaining the border color when the textfield is focus ...
Incorporating @material-ui/icons into my project has been a game-changer. I am eager to delve into the source code behind this resourceful tool. A visit to https://www.npmjs.com/package/@material-ui/icons brought me closer, but I hit a roadblock when nav ...
After creating my own component as shown below: import React, { Component, Fragment } from 'react'; import Checkbox from '@material-ui/core/Checkbox'; import clsx from 'clsx'; import { makeStyles } from '@material-ui/core/styles'; function StyledCheckbox ...
Is there someone who can assist me in developing an in-page navigation feature that dynamically updates as you scroll down the page? I have been unable to locate any resources on how to achieve this. The navigation is positioned on the right side of the ph ...
Is there a way to have the Container Component with a maxWidth Prop that changes based on Theme Breakpoints? If not, what is the best approach to achieve this functionality? ...
Recently, I've started learning React and I'm utilizing material-ui for my project. My goal is to create a customized autocomplete feature in React where selected data from the dropdown will appear as chips inside the text input field. I am currently using ...
Good day everyone, I am inquiring about how to organize data by name. Can rows be grouped within the react-data-table component? Here is an example of what I mean: https://i.stack.imgur.com/f2sue.png ...
I have a component called CustomDatePicker which has been configured for localization as shown below: function CustomDatePicker(props: DatePickerProps<unknown> & React.RefAttributes<HTMLDivElement>) { return ( <StyledDatePicker ...
In my components, I utilize the MuiThemeProvider to customize a button. This is necessary because only "primary" or "secondary" can be used instead of a custom palette name. The code for this setup is as follows: import React from "react"; import { badThe ...
Currently, I am utilizing version @mui/x-date-pickers ^6.17.0. Here is the custom date picker I am using: https://i.stack.imgur.com/k8nF1.png Upon clicking the input field, the placeholder switches and a value gets appended. However, modifying the input ...
This particular scenario may appear to be straightforward, but the official documentation of Material UI lacks a clear example on how to achieve this. Even after attempting to nest the grid elements, I encountered an issue where the grid element on the ri ...
I am encountering an issue with the width of my Goal components and can't figure out what is causing it. https://i.stack.imgur.com/jPlyf.png Despite setting the width of the Paper selector to 100%, each Goal component's width remains inconsiste ...
I've been trying to customize the language of the default parameters in my DataGrid MUI configuration, but I'm encountering an error when attempting to add the localeText. I have been following the guidelines provided on their website page titled Locale Te ...
Is there a way to assign a unique id to each MenuItem using the map() function nested within another one? <table className={classes.table}> <thead> <tr> <td /> {sit.sit.map(sit => ( <td className={ ...
While working with CSS in JS (JSS) and material-ui, I have encountered some challenges. I am able to inject styles effectively based on the context, but I am unsure of the additional benefits or features that it offers beyond style injection For example, ...
Any advice on excluding the "TOTAL" row from sorting in MUI library? onSortModelChange={(test, neww) => { neww.api.state.sorting.sortedRows = [14881337, 2, 3] neww.api.setState({...neww.api.state}) } } Review ...
export default function Post({post}) { const [like,setLike] = useState(post.like) const [islike,setIslike] = useState(false) const handler=()=>{ setLike(islike? like-1:like+1 ) setIslike(!islike) } return ( <> <div classNam ...
After creating a fresh Next.js application with the app folder, I proceeded to integrate Materiel UI following the example provided in the documentation. However, I encountered an error: TypeError: createContext only works in Client Components. Add the & ...
I am currently working with Material UI checkboxes. I want to customize the background color of the checkbox, but setting the root background to white creates a rounded shape that doesn't match my intended design. Is there a way to change the shape of ...
Caution: PropType validation failed. The prop text provided to LinkMenuItem is invalid as it should be a string, not an object. Please review the render method of Menu. Below is the code snippet: var menuItems = [ // text is not valid text { route: &ap ...
Is there a way to create some space between a button and a CircularProgress component that are aligned next to each other in the same row? I've tried using styles, but haven't been successful. Any suggestions on how to tackle this? <Grid con ...
Hey there, I'm experiencing an issue and could really use some help figuring it out. I've been using Next.js v10+ with Material-UI and React Redux / Redux for server-side rendering. One of the problems I've encountered involves a Redux Prop that is passed ...
I am currently developing a weekly event scheduler where users can select one or more table cells to add events. However, I am encountering issues with making each cell selectable and identifying the specific cell being clicked during a click event. class ...
Having trouble retrieving input values with the provided code. Attempted using onKeyUp, onKeyDown, and onKeyPress, but none of them returned the value as desired. Typically, I would use the onChange property to get the value, but it triggers for every ne ...
How can I make the Grid component stretch when one of the Card components contains extra text? You can view the sample code here. Changing the alignItems property to "flex-end" or "center" works, but when using alignItems: "stretch" it does not work. I ...
I am using a NativeSelect component. <NativeSelect input={<BootstrapInput/>} onChange={this.handleClick} > <option value="1">1</option> <NativeSelect> Is there a way to customize the color of the dropdown button in Nat ...
Currently, I am exploring how to personalize MUI 5 components by leveraging theming and props more and minimizing the use of CSS overrides (which can negate the benefits of MUI). To start off, I have created my own theme: export const theme = createTheme( ...
I'm encountering an issue with clearing a form that I created using Material UI. Despite searching for solutions on Stackoverflow, none of them seem to work for me. Using setState did not achieve the desired result of clearing the form. I am looking for ...
I am encountering a similar issue as described in this Stack Overflow post, however, the solutions provided did not resolve my problem. The situation involves disabled textfields. When the edit profile button is clicked, the disabled state for the account ...
Is there a way to enable keyboard input control for the material-ui-time-picker? Currently, it only allows editing when clicking on the clock interface. Here is a snippet of my code: import React, { Component } from "react"; import { TimePicker } from " ...
Currently, I'm utilizing React JS and I've brought in a component from Material UI known as (https://material-ui.com/api/table-pagination/). My goal is to customize the Default labelDisplayedRows that looks like this: ({ from, to, count }) => ${from}-$ ...
After observing the frequent use of the showmore feature in Google design, I began to wonder if there is a similar component available in Material UI. Can anyone confirm? If my description is inaccurate, it appears like this: https://i.stack.imgur.com/Jpy ...
Here is a set of data for you to explore: const example = [ {character: 'JAMES BOND', affiliation: 'AGENT'}, {character: 'KING ARTHUR', affiliation: 'KNIGHT'}, {character: 'ROBIN HOOD', affiliat ...
<RaisedButton containerElement={NavLink} to="/somewhere"> Somewhere </RaisedButton> Generates the following warning message: Warning: Failed prop type: Invalid prop `containerElement` provided to `RaisedButton`. in RaisedButton (located at ...
Below is the code snippet I have: class _ReadingBookPage extends State<ReadingBookPage> { double _sizeFont = 14; ... @override Widget build(BuildContext context) { return Scaffold( body: ... ...
Encountering style flickering on initial render in Next.js while using the @mui/material/useMediaQuery function. The issue arises from the useMediaQuery value changing between server side and client side rendering. Is there a solution to this problem? imp ...
In my Nextjs project, I am looking to implement RTL (right-to-left) for certain components. These components are using material-ui. However, changing the direction in _documents.js with <HTML dir="rtl"> results in all components switching d ...
Having trouble changing the text for child elements when applying CSS classes to parent elements. Is there a specific reason why this is happening? Take a look at my current code: <Box //not affecting all child elements ...
I recently had a question similar to this one, but unfortunately it was closed due to the length of the code. I'll try to keep this brief. My partner and I created a form, however, all the <Select> inputs are being sent as "undefined" in the HT ...