I am currently working on implementing an input field that completes a link and directs the user to it. However, when I click on the button, the page opens but there is an 'undefined' displayed at the end, as if the input field was not properly updated. ...
I am currently working on populating Material's UI with a list of countries using the following code: import React from "react"; import FormControl from "@material-ui/core/FormControl"; import InputLabel from "@material-ui/core/InputLabel"; import Se ...
I am looking to develop an autocomplete feature that consistently shows the primary option 'Add New Customer/Vendor.' This option should be visible regardless of whether a search is performed, there are no search results, or before any search is initiated. ...
Is it possible to customize the font size of the label within FormControlLabel while utilizing React for Front End JS development? <FormGroup row> <FormControlLabel control={ <Checkbox onClick={() => onClick('rdOp ...
As I continue to learn ReactJS with Enzyme and Material-ui, I am facing a new challenge. In my component that utilizes Material-ui's TextField, I want to perform a unit test for a specific scenario. When a user inputs '123' into the TextF ...
I'm currently involved in a project where I am using React Material UI and need to change the border bottom color of the Select component when it is focused. Here's the code snippet that I have implemented so far. import { Select as MuiSelect, w ...
After spending 9 hours scouring the internet for a solution, I am at my wit's end as nothing seems to work. Currently, I am developing a React component using TypeScript. The issue lies with a simple use of the Material UI Accordion: const Accordion = wi ...
I'm currently working on a project using Material-UI in combination with React and TypeScript. <TextField id='user-id' label='User ID' type='number' required helperText='Required' inputProps={{ maxLength : 12 }} onChange={(e) => setUse ...
I am currently working on setting up a contracting, building, and construction company. As part of this project, I need to create an invoice by sending a request to the backend. The format of the request should match the details shown in the following imag ...
Welcome to my UI experience! https://i.stack.imgur.com/gOwAn.png Check out how the UI adapts when I resize the browser: https://i.stack.imgur.com/MyxpR.png I aim for the left component to be visible first, followed by scrolling to see the right compone ...
I am facing an issue with displaying a menu on right-click using react-big-calendar and material UI. The problem is that the menu is not appearing correctly in the HTML, it's showing up in the top right corner. Below is my code: const handleClick = (ev ...
I've been researching the MUI documentation, blogs, and various posts on Stackoverflow, but despite my efforts, I can't seem to get my vscode intellisense/typescript to recognize the changes I've made. These are fairly straightforward modifications, simil ...
In my electron/react application, I am implementing Material UI tabs in the following manner: <Tabs> <Tab label="View1" > <View1 /> </Tab> <Tab label="View2"> ...
I have a question about the Card component in material-ui. Is there a way to add an effect where the image inside the card pops out or zooms in when hovering over it with the mouse? import { makeStyles } from '@material-ui/core/styles'; import Ca ...
My website features multiple filters, including by date and duration, allowing users to easily find the information they need from a large dataset. There is also a "reset all filters" button that clears all filters and displays the full list of products. ...
Struggling to implement a pop-up Menu as an action list for each Table Row. Unfortunately, when clicking on "Action", the "handleMenuClick" function consistently logs "Jan 04" for all entries. import React from "react"; import ReactDOM from "react-dom"; i ...
I'm currently in the process of developing a react application using MUI (Core & X) and encountering some challenges with WCAG Accessibility. Although I am utilizing various components provided by MUI, I am facing issues specifically with the data grid, se ...
Currently in the process of converting a JavaScript project using Next.js and Material UI to TypeScript. This is a snippet of code from one of my components. Whenever I include Props as an intersection type along with MUI's BoxProps, the TypeScript c ...
Is there a way to apply multiple background colors to a material UI snackbar? I attempted using linear-gradient as shown below, but it didn't work. import Snackbar from 'material-ui/Snackbar'; const bodyStyle = { border: `2px solid ${config.actualWhit ...
Utilizing Material UI React, I am constructing a dropdown menu containing various options. My concern is: if I choose two options from different dropdowns within the menu, how can I intercept or store which option was selected? Below is a snippet of my co ...
I am currently working on a blog project using React and Material UI. In one section of the blog, I want to display all my existing posts with an option to delete them individually by clicking on a delete icon. Despite my attempts to use useState to mana ...
Attempting to reproduce the material ui modal example has proven to be a challenge for me. Initially, I encountered an error stating "Cannot read property 'setState' of undefined" which I managed to resolve. However, even after resolving this issue, clicki ...
I am trying to pass an argument category to the component CustomTreeItem which uses TreeItemContent. Documentation: https://mui.com/ru/api/tree-item/ import TreeItem, { TreeItemProps, useTreeItem, TreeItemContentProps, } from '@material-ui/lab/Tree ...
The ellipsis is currently being used by default, but I would like it to wrap automatically. Thank you! https://i.stack.imgur.com/bRFtx.png https://i.stack.imgur.com/oaQtp.jpg This is my first time using the material-ui framework and after checking some e ...
Is there a way to limit the selection to just one country code, preventing users from choosing other countries? <MuiPhoneNumber fullWidth label="Phone Number" data-cy="user-phone" defaultCountry={"us" ...
Currently, I am utilizing MaterialUI with some modifications to create a personalized library. My tool of choice for documentation is Storybook, using Typescript. An issue I have encountered is that the storybook table props are not consistently auto-gene ...
In my grid layout, I have columns set to 3,6,3 and a spacing of 3 between them. On larger screens, the spacing between grids looks fine. However, as the screen size decreases, the spacing remains the same which is not visually appealing. What I am aiming ...
Having trouble adjusting the height of my Responsive Modal when the window height decreases. The content is slipping under the window and the scroll bar isn't adjusting accordingly. It seems like the nested div structure is causing issues. https://i.s ...
After creating a customized filter for MUI's datagrid, I encountered an issue where the two select options in the filter were too large and ended up extending outside the modal. Whenever I clicked on an option, the entire modal would close unexpectedl ...
I am facing a challenge with an Autocomplete component that needs to handle a large data list, up to 6000 elements, and display suggestions based on user input. Due to the sheer number of options, when a user types on a slower computer, there is a noticeab ...
In MUI version 5, how can one pass CSS classes to components using the className prop and also incorporate theme in those classes? I attempted to achieve this using styled-components in MUI v5, however it seems that while we can target specific classes u ...
Currently, I am in the process of upgrading from Material-UI 1.x to the newer version Material-UI 3.9.2. I had several components that were functioning well with Higher Order Components (HOC), but when it comes to migrating them to 3.9.2, I am facing some ...
Currently, I am developing a mobile signature feature for my website which involves three components: Form.js (the parent component using Formik for the form), Admin.js (a child of Form), and Signature.js (a child of Admin). Upon entering the Admin sectio ...
I attempted to create a new theme in order to replace the default font family of MUI but unfortunately, it was not successful. This is what my theme component looks like: import { createTheme } from "@mui/material/styles"; const theme = createT ...
I've been struggling to get the media query for the searchIcon in const search to function properly. The other media queries seem to be working fine, but this one is giving me trouble. I attempted to apply it to const styles instead of const search, and I ...
Looking at the Material-UI Stepper code, I have a requirement to create a select element with dynamic options based on the selected value in another select within the same React component. To achieve this, I wrote a switch function: function getGradeConte ...
Is it possible to incorporate a linear-gradient below color as a background for Material UI Chip? linear-gradient(to right bottom, #430089, #82ffa1) The version of Material UI I am working with is v0.18.7. <Chip backgroundColor={indigo400} style={{widt ...
I've encountered an issue with the borders of the text fields in my React project. Here's how I want the text fields to look: https://i.stack.imgur.com/MP6DG.png Currently, the borders appear straight in the browser even though I want them rounded. I a ...
Is there a way to eliminate the padding caused by ListDetailPaneScaffold? import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Arrangement import androidx. ...
Every time I attempt to add the Menu component multiple times, I encounter an issue with the popup list displaying incorrectly. To demonstrate this problem, you can view it through the link provided on codesandbox below. I have included data-id attributes ...
Utilizing MUI v5's styled(), I aim to adjust the color returned based on two different props of the component, darkMode and destructive. This is my current approach: const StyledButton = styled(Button)<ButtonProps>(({ darkMode, destructive }) => ...
import React from "react"; import "./styles.css"; import Input from "@material-ui/core/Input"; import MenuItem from "@material-ui/core/MenuItem"; import FormControl from "@material-ui/core/FormControl"; import Select from "@material-ui/core/Select"; cons ...
Is there a better way to type the MUI Chip prop color when the actual value comes from an object? Using any doesn't seem like a good option. Additionally, is keyof typeof CHIP_COLORS the correct approach for typing? import { Chip, Stack } from "@mui/m ...
I have been experimenting with styled components to customize the appearance of basic material-ui React components. My goal is to pass props into the MUI component and then use styled components to apply CSS styling. One interesting aspect is being able t ...
I'm currently faced with a challenge of applying custom styles to the text within a ListItemText component from Material UI: const textStyles = { color: 'red' } <ListItem button><ListItemText style={textStyles} primary="MyText" />& ...
Is there a way to vertically align items in Material UI effectively? Check out this code sandbox example for reference. In my project, I aim to position the Start element at the top, Center element in the middle, and the End element at the bottom ...
I have integrated CKEditor React Component into my project from the following link: . I am using this component multiple times across different folders within my project. import React, { Component } from "react"; import { CKEditor } from "@c ...
<AppBar title="My Custom AppBar" showMenuIconButton={false} /> By setting 'showMenuIconButton' to false, the Menu Icon is hidden on all devices. However, I am specifically looking to hide it only on Desktops. Is there a way to achieve th ...
Currently, I have a custom styled TextField that exhibits autofill behavior in the email field. However, when an autofill choice is selected, the background of the TextField changes to white with black text. I am looking to modify these styles. I attempte ...
The code snippet provided above showcases four components: StyledBreadcrumbs, FilterStatusCode, Filter, LinkedTable. The FilterStatusCode component enables users to input search data using TagInput. If the user inputs numerous tags, this component expands ...
I've integrated Material-UI's <Table/> (http://www.material-ui.com/#/components/table) component with <TableRow/> containing checkboxes in a ReactJS project. While I can successfully select rows by checking the boxes, I am struggling to log the ...
I currently have the following code for handling a popover: const [open, setOpen] = useState(false); const anchorRef = createRef() const handleClose = () => { setOpen(false); }; const handleClick = useCallback( (event: MouseEvent<H ...
Let's take a look at this snippet for creating a Material Dialog in code: <Dialog open={this.props.open} onClose={this.props.closeAtParent} PaperProps={{ style: { minHeight: '75vh', minWidth: '75vw', ...
Attempting to incorporate the < ChipInput /> element from https://github.com/TeamWertarbyte/material-ui-chip-input. Using material-UI react component, my current setup includes: A functional search input bar. When an artist's name is typed, it returns ...
Is it possible to override a specific component with a parent reference, such as the search input text on a datatable? Currently, I am overriding the entire input in order to achieve this. overrides:{ mycomponentselector: { MuiPaper: { ...
Is it possible to create a Material UI component of type "datetime-local" that can be displayed on multiple lines while still allowing the date to be edited? The issue arises when the width is too narrow and cuts off the date text. Although the TextField ...
I encountered some console errors while working with this react function component, specifically receiving the following error message: The MUI Select component does not accept a Fragment as a child. It is recommended to provide an array instead. functi ...
I am currently working on creating a react material ui AppBar. The design includes a logo and tabs, with the tabs supposed to be centered in the AppBar and the logo positioned on the left side. However, I have been facing difficulty in making the logo al ...
Here is a snippet of my code: import { AppBar, createStyles, MenuItem, Select, Toolbar, Typography } from '@mui/material'; import { makeStyles } from '@mui/styles'; import { useState } from 'react'; const useStyles = makeStyl ...
My current project involves a react application with mui components and I'm facing a challenge while working on the Rich Text Editor (RTE). The process goes as follows: Initially, I receive a string like this: '<h1>Hello, {{name}}!</h1><p&g ...
Currently, I am attempting to specify the width and height for only the (Iphone 7 Plus) within my project using withStyles. import { withStyles } from "@material-ui/core"; I have tested the following code: "@media (width: 414px) and (height ...
Currently using react material ui and interested in changing the background color of a standard input. The issue arises when the label is overridden by the background color when the input is not selected. Input selected Input not selected This is my att ...
I'm struggling to disable the hover color on my button. The inline style I tried isn't working as expected. const ButtonWrapper = styled(Box)` display: flex; margin: 0 3% 0 auto; & > button, & > p, & > div { margin-right: ...
I'm currently working with a material-ui autocomplete element <Autocomplete id="combo-box-demo" autoHighlight openOnFocus autoComplete options={this.state.products} getOptionLabel={option => option.productName} style={{ width: 300 }} ...
I am completely new to React and would greatly appreciate any assistance. Currently, I am working with a React Material Datagrid that lists users. My goal is to display detailed user information in another window when a row in the datagrid is clicked. I n ...
Looking for assistance in decreasing the height of the Material UI Autocomplete component. I've attempted to set the height property to 10 or 20 px using the classes property, but it hasn't had any effect. I also tried reducing the height of the ...
When the button is clicked, I want to apply the following styles to the ul: &.MuiList-root { padding-top: 0px; padding-bottom: 0px; } View the issue in action on this live sandbox: https://codesandbox.io/s/react-typescript-forked-tyd8n8?fil ...
I have been working on a custom nested form framework that utilizes the redux form and material ui components. You can check out the progress of the components I have built so far here: https://codesandbox.io/s/busy-darkness-npg7w?file=/src/Home.js One sp ...
How can I add the placeholder "Select a brand" to this select element? I've tried different options with no luck. Here is the code snippet I am working with: <FormControl fullWidth> <InputLabel id="demo-multiple-name-label" s ...
I am exploring the world of Material UI React data grid for the first time, and I am looking to add a unique background color to only the initial three rows. Each row should have a different color scheme that remains static, without any interactions trigge ...
I've been attempting to modify the background color and font color of the TimePicker using the css className properties, but I haven't had any luck. Is there anyone who knows how to achieve this and where can I find documentation on these propert ...
In my current setup, the data structure looks like this: const bullets = [ "Top Sports are:", "hockey", "soccer", "football", "Top Names are:", "liam", "noah", "jordan" ] Usin ...
I am working on a codebase that is structured like a single spa micro frontend in React. It utilizes MUI5 and Emotion/React for layouts and designs. Each micro frontend has its own package.json file, with Emotion/React installed separately in each one. The ...
How can one dynamically set the text color based on the background color of a component using Material-UI API? If component A has a light background, then the text should be dark. For component B with a black background, the text should be light. (I have ...
I'm currently working on a project that includes a React Material UI Select component. I've successfully applied custom styles to it, but I'm facing an issue with a persistent blue outline around the Select box. This outline appears when the ...