Help! I have 5 empty star icons (<StarBorderIcon/>) displayed for a product on the material-ui website. I need to replace them with filled star icons (<StarIcon/>) based on the rating entered into a function. I attempted to use replace(), but i ...
Despite numerous attempts, I have been unsuccessful in styling the @mui/x-date-pickers <DatePicker/> component. I've experimented with various methods such as sx={{}}, style={{}}, makeStyles(), .css with the !important rule, renderInput={(param ...
Looking for advice on how to incorporate a Mouseover feature into a Material UI ListItem from the following link: http://www.material-ui.com/#/components/list. As the "SecondaryText" is limited to 2 lines, I am exploring options to display additional data ...
I've been struggling to change the color of the text field input when both the error and focused classes are active. Despite trying various styles, I just can't seem to get it right. Can someone help me identify which class I need to target? I&ap ...
<div className="textInputTag"> <span className="label">{props.label}</span> <TextField placeholder={placeholder} error={error ? true : false} defaultValue={props.defaultValue} onBlur={onBlur} onInput={on ...
I am looking to create a multiple selector with predefined choices for users to select from. This image (link: https://i.stack.imgur.com/Ap7jL.png) shows the desired functionality. Initially, I considered using the <Switch> component but it didn&ap ...
I have been working on developing an app and encountering a frustrating issue. When I visit the library page (https://material-ui.com/components/buttons/#button), all the components are displayed in a desirable size. https://i.stack.imgur.com/DbqS6.png ht ...
I have been working on customizing the Select component provided by Material UI. Here is a visual representation of what it currently looks like: https://i.stack.imgur.com/YGheB.png My goal is to change the border-color of the select component from the ...
Currently, I am diving into a new project utilizing React version 18.2 and MUI 5.10.3 library. My main task involves designing a table with specific styles within one of the components. The table header should not display any border lines. The table body ...
I would like to modify the color of the label and text in the TextField component. I am currently using material-ui@next. The instructions from version 0.15 are not effective (I have already verified this). Can someone provide a brief example of how to ...
I am currently working on integrating the List component from material-ui into my project. I have successfully managed to display a randomly generated array of elements with a scrollbar list, which is exactly what I wanted. However, I am now facing an is ...
Attempting to construct a reusable React component with Material UI and then link it using npm to another application. Both the component and application are bundled through webpack. While the application successfully renders the component during developme ...
Working on React's Select component has been quite the challenge for me. I'm in the process of creating a simple dropdown button, also known as a ComboBox, similar to what can be seen on GitHub Insights: https://i.stack.imgur.com/J9Bcd.png Below is the c ...
I successfully created a basic table using react and material UI by following the instructions found at: https://material-ui.com/components/tables/#table. The table is functioning properly, but I am finding the scrollbar to be a bit inconvenient. https:// ...
Is there a way in React.js to open a table tab in a new window for separate interaction with the component? If so, what is the most recommended method to achieve this functionality? ...
Below is the code snippet I am currently working with: import React from 'react' import Button from '@material-ui/core/Button'; import Checkbox from '@material-ui/core/Checkbox'; import { DataGrid } from '@material-ui/da ...
Having some difficulty understanding how to detect a scroll event with a Select component using Material-UI. The Select has MenuProps={...}, and I want to listen for the scroll event inside it. I've tried putting onScroll within MenuProps={...}, but the e ...
tag: After wrapping my react component and releasing it as a web component, I encountered an issue where styles created using makeStyles hook were not being applied because they were inserted into the head section of the browser DOM. Is there a way to con ...
Background I'm currently working on a website project that includes a carousel of MUI cards using a unique stack as the underlying component. However, I've encountered an issue where there is a noticeable 4-second delay whenever I try to scroll and see n ...
Currently, for the React App I am developing, I am utilizing Material UI. In order to achieve a multi-line placeholder for a textarea using the TextField component, here is what I have so far: <TextField id="details" ful ...
I am encountering the error message "Each child in a list should have a unique key prop" when I try to render my content App.js const blogPosts = [ { title: '...', description: '...', }, { title: '...' ...
Currently in the process of creating a file upload Input field with an icon for input adornment using Material UI. The goal is to have the ability to click on the icon to upload a file. While referring to the MUI documentation found here: input adornment, ...
I am working on creating a React frontend with a dark theme that follows Material design guidelines. As outlined in the dark theme specifications, surfaces should be lightened with each elevation level. However, I have encountered an issue with the elevati ...
When utilizing the TextField element as a Select field with a considerable data set of 1000 items, there is a noticeable delay in the list's mounting and unmounting process. import React from 'react'; import MenuItem from '@material-ui/core/MenuItem'; imp ...
I'm encountering an issue while attempting to showcase images in my Next.js project with Material UI. Here is the code snippet I am using: <Box display="flex" alignItems="center"> <Image src={' ...
When styling a mandatory TextField, you can refer to this example const styles = theme => ({ labelAsterisk: { color: "red" }, cssLabel: { color: "orange" }, cssRequired: { "&:before": { borderBottom: "2px solid orange" ...
I have created a Data Grid table with 10 columns. It displays perfectly on large screens, but when the screen size is reduced below 1380 px, instead of having a smooth horizontal scroll bar, it looks messy. Instead of changing to a different library, I am ...
I encountered an unexpected custom error while trying to implement custom error notifications in my form. The custom context I set up for this functionality does not seem to be working as intended, resulting in a thrown error for its non-existence. My deve ...
My options are structured as follows: const options = ['option1', 'option2']; I am looking to display the options with icons like this: https://i.stack.imgur.com/aubHS.png The current code for rendering options looks like this: ...
Is there a way to create a list of Material UI components with images that have uniform height, even if the original images vary in size? I want to make all image heights responsive and consistent across all cards. Any suggestions on how to achieve this? ...
I am facing an issue with displaying notifications on my Gatsby blog whenever the service worker updates. I am using a MUI Snackbar toast for this purpose. However, sometimes the styling of the toast is not applied correctly and it ends up looking like thi ...
I'm looking to create a way to control the opening and closing of the Material UI Drawer using just one button within a React Functional Component. const handleDrawerOpen = () => { setOpen(true); }; const handleDrawerClose = () => { se ...
I need assistance with formatting my code to display "Watch Movie Yes I agree" in one line. How can I achieve this layout? Visit this link for the code <Box padding={1}> <FormControl> <RadioGroup> <FormControlL ...
I encountered an issue with the following code snippet: /* eslint-disable react/display-name */ import { Box, Button, LinearProgress, makeStyles } from '@material-ui/core'; import { Refresh } from '@material-ui/icons'; import { SearchHi ...
After studying JavaScript React, I have come across a challenging question: Recently, I created a project on Codesandbox The main issue is that I am struggling to align the icon next to the input field as shown in the image below. https://i.stack.imgur. ...
How can I change the icons for the scroll buttons (left and right) on my Tabs component? I see that there is a prop called 'ScrollButtonComponent', but I am unsure how to use it to assign different icons to the left and right buttons. Here is a screensho ...
I am working on implementing a feature in my react application where users can input a search term, and upon pressing the button, it will be used to perform a search. The text input field and button are utilizing material-ui components. At this stage, I si ...
The DOM structure for Material UI TextField is as follows: <FormControl... > <BaseInput ...> <input class ="MuiInputBase-input-29" ...> </BaseInput> </FormControl> When I add anything to the TextField's 'cla ...
I have utilized Material UI Grid to display data in a chart. However, the appearance of the chart does not match my expectations. Instead of resembling the desired "dense table," it looks different: Actual Look of the Chart Below is the code snippet I ha ...
Hey everyone, I'm facing an issue with my "Checkbox" component in React. After clicking on it, the state doesn't update to 'true' as expected. The checkbox works visually in the DOM but the state remains 'false'. Can someone p ...
One of my tasks is to set a default value based on the previous selection in the Userlevel dropdown. The value will be determined by the Username selected, and I need to dynamically update the default value label accordingly. For example, if "dev_sams" is ...
Is there a simple way to convert my Material-Ui Grid into a drag and drop grid? I've already attempted using the react-grid-layout package, but it produced unexpected results. Can someone suggest an easy method for making the Material Ui grid draggable and ...
Objective: Retrieve data and showcase it in a dialog box using the button located in the Button column. Essentially, clicking on one of the buttons will display the corresponding data in the dialog. Challenge: Currently, I can only extract hardcoded s ...
I am facing an issue with my MUI v5 dialog where I cannot seem to set its width using the style() component. import { Dialog, DialogContent, DialogTitle, Paper, Typography, } from "@mui/material"; import { Close } from "@mui/icons- ...
I have a question about how to programmatically add a prop to a component in my React project. Here is the scenario: In the render() method, I have the following code snippet: <TextField name="password" va ...
I am currently utilizing material-ui's dialog feature. In this setup, when a user clicks the "sign out" button, a dialog box opens with options to either confirm the sign out by selecting "yes" or cancel it by choosing "no". The issue arises when the ...
Currently, I am in the process of developing a web application utilizing React and Material UI. The font-family being used is Roboto, which is fetched from the index.html file as shown below: <link rel="preload" href="https://fonts.goog ...
I've been seeing discussions about ThemeManager scattered around the internet, but it appears to be only accessible in the react-native branch. Is this absence from the "next" release intentional or unintentional? Thanks, Andy ...
My login react component is not showing the 'wrong credentials' error in the helper text even when false credentials are entered. I am pushing an error message into an array, assigning it to state, and then referencing that state in my helperText ...
I'm attempting to develop an edit form for modifying data fetched from a database based on its ID. Here is what I have tried: import React, {FormEvent, useEffect, useState} from "react"; import TextField from "@material-ui/core/TextF ...
Currently, I am utilizing Tabs from Material UI to showcase a List component that is filtered by the tab. Take a look at the code snippet below from my Container Component: <Tabs className="DrawerTabs" ...
I'm currently working on a project using React, TypeScript, and Material UI. Here is the layout I have: <MuiThemeProvider theme={muiTheme}> <My Component/> </MuiThemeProvider> Within my component, the code looks something like ...
import Slider from '@material-ui/lab/Slider'; Returns an error during the build process. ERROR in ./src/components/StepSlider/StepSlider-view.jsx Module not found: Error: Can't resolve '@material-ui/lab/Slider' in 'D:\G ...
I'm currently working on a dynamic user interface that allows for adding and removing items dynamically. Each item has both an add and remove button, with a special animation effect using Zoom. While this works smoothly when adding new items, I encoun ...
I am currently using the Mui Slider component for a user interface where I need to restrict its value within a certain range. For example, I want the slider's handle to become unmovable after reaching 50. Users can still select values up to 50, but the sli ...
When a MenuItem is hovered over, the position of the Menu container should remain unchanged. [x] The issue persists in the most recent release. However, downgrading MUI to v4.5.0 results in the expected behavior. Current Behavior ...
[insert image description here][1] I attempted to add mui styles and other components to my local machine, but encountered a dependency error. How can I resolve this issue? [1]: https://i.stack.imgur.com/gqxtS.png npm install @mui/styles npm ERR! code ERE ...
I've been experimenting with Material UI Tabs and trying to set the orientation to vertical using makestyle. While I successfully applied a background color in the root, I am having trouble applying the vertical orientation. const useStyles = makeStyles( ...
I am trying to figure out how to add a location icon to React Material-UI Select options. Unfortunately, I couldn't find any specific option for this in the API docs. Can someone please assist me with this task? Your help would be greatly appreciated. Than ...
I am struggling with integrating an icon into my Select component as input adornment, but only if it is being passed down from the parent. <Select className={classes.select} native input={<FilledInput { ...icon & ...
Hello there! Here is my query: I am currently working on a project using NextJS + React with node. Everything seems to be running smoothly, except for one issue I encounter when reloading a page with a Select component from Material UI. The relevant code ...
I am working on implementing unique custom URLs for each item based on user interaction. After a user clicks "View Item", I want to redirect them to a URL that includes the item's name and ID, like this: "http://localhost:3000/item-1/-MC_xbIMm8zctEWRJ-Lj/" ...
My goal is to make a selected row move up and down on arrow clicks, and in order to achieve this, I need to retrieve rows from the MUI DataGrid. I am using the useGridApiRef hook to do so, ensuring that the rows are filtered and sorted accordingly to match ...
I've implemented the Menu Component from Material UI as shown below - <Menu open={open} id={id} onClose={handleClose} onClick={handleClick} anchorEl={anchorEl} transformOrigin={{ horizontal: transformOriginRight, vertical: transf ...
Search functionality is functioning correctly in this code snippet: <MaterialTable columns={[ { title: 'Name', field: 'firstname', type: 'string' } ]} /> Unfortunately, the Search filter is not working as expected i ...
I'm currently facing an issue where I'm trying to include a MUI TableRow inside a Tooltip component in order to display a long uuid when hovering over the row. However, I noticed that all the columns of the row are being compressed into the first column an ...
I'm new to ReactJS and struggling with a basic issue that involves some complex manipulations I don't quite grasp yet, as per some explanations provided here. Let me illustrate my problem briefly: In a specific implementation, the ""{console.log('Te ...
Here's a simple question - how can I create a button with both icon and text in material 15? <button mat-button> <mat-icon>keyboard_arrow_left</mat-icon> Back To Home </button> https://i.stack.imgur.com/Llhx1.png However, the ...
Utilizing the FloatingActionButton in a unique way, I have altered the background-color to white and adjusted the IconColor. Instead of using Material UI's icons, I am using react-icons library to display the icon. const customIconStyle = { height: ...
I have incorporated the Material UI AutoComplete component which can be found here. Below is my code snippet: <Autocomplete open={showUniSuggs} onOpen={this.props.getUniversityOptions} onChange={(event, value) => this.props.handleUniversi ...
I'm attempting to center a FAB inside a circular progress bar. The suggestion was to use relative positioning for the parent and absolute positioning for the children. My goal is to maintain responsiveness, so that it looks consistent even when the sc ...
I am trying to customize the mouse cursor behavior of a TextField component from Material UI when its variant is set to "outlined". Currently, the cursor changes to Text but I want it to appear as a pointer instead. I attempted to override the default beha ...
Looking to customize the SelectField's popover background color in material-ui. Is this possible? After exploring the generated theme, it seems that there is no option for configuring the selectField or popover. Attempted adjusting the menu's backgroundCo ...
Prior to the modification made in this PR, I was able to adjust the position of my LeftNav without covering the AppBar by applying a 'top' attribute to the component's style. However, since this PR has changed the styling to apply to the roo ...
I'm attempting a simple task: creating two themes for a website using Material-UI themes. One theme is light and the other is dark, but I am having trouble with it. The theme applies to every Material-UI react element, however, the root element in the htm ...