English is not my first language, so please bear with me. I am currently working on a search engine home page in next.js 14 and I have encountered an issue. I want to incorporate a background image with a dark filter under the search bar. However, my curr ...
After exploring the home pages of materializecss and materialUI, I noticed that materializecss describes itself as a modern responsive front-end framework based on Material Design, while materialUI mentions React components that implement Google's Mat ...
Currently, I am working on adding a loading bar similar to the one used by Github. My goal is to have it start loading when a user clicks on another page and finish once the page has fully loaded. In order to achieve this, I am utilizing material-ui and t ...
I am facing an issue with the styling of tabs in my React app dashboard that uses Material UI Tabs. Specifically, I have a tab in the dashboard that opens a modal for adding new users to the system. The modal itself also contains tabs, but no matter how I ...
I have successfully implemented a SignIn component by following the example provided in Material UI's documentation, which can be found here. import React from 'react'; import PropTypes from 'prop-types'; import Avatar from ' ...
My challenge is to have an image that covers the entire background but it seems to stop abruptly where another object is placed, unable to extend further. I am utilizing Material UI and here is a snippet of my code: import { Image } from "../images&q ...
I'm struggling to customize the appearance of child th elements using the TableHead component from MaterialUI. While I've been successful in modifying various properties, I'm facing difficulty in changing the hover color. Below is the snipp ...
Seeking guidance on how to manage state changes using a single handleChange method. I am currently handling two text fields with handleChange, but I am struggling to incorporate changes from the SelectField component into the same handleChange method. Fo ...
I'm struggling to populate a menu list from my PouchDB database because I am unable to retrieve anything within the promise that is executed after calling get on the db. Below is the code in question: <MenuList> {this.populateSavedClues()} </ ...
After browsing through some Q&A, I stumbled upon a thread on the topic of Tabbed form and validation. Although it was close to addressing my issue, it did not provide a solution. I am currently utilizing react-material-ui-form-validator. When multiple ...
Imagine I have a group of RadioButtons. After clicking one, I realize that I don't want to submit the form after all. Instead, I just want to cancel and return to the state where none are selected. How can I achieve this? ...
When dealing with a select tag, the default behavior is that the Click option is disabled and hidden. However, if you want to show an option by default and make sure it remains invisible when the user clicks on the select tag, it can be a bit tricky. Set ...
I searched the documentation thoroughly but could not locate an attribute called z-index that specifies how the Drawer should be displayed in relation to the AppBar - should it appear over or beneath it? Are there any efficient methods to achieve this? T ...
Currently in the process of upgrading my MUI5 application from Next 12 to Next 13 and experimenting with integrating next/font. In my previous Next 12 version, I utilized two Google fonts - 'Rubik' and 'Ephesis' which were included in t ...
Attempting to customize the CSS properties in the "DataGrid" Material UI, specifically adjusting font weight and overflow of the header. Below is the JSX code snippet: import React, {useState, useEffect} from 'react'; import {DataGrid, GridToolbarContaine ...
How can I implement material symbols in a lazy loaded or dynamically imported Vue.js component? My current configuration is not working as the icons only show up in statically loaded views: Main.js import { createApp } from 'vue/dist/vue.esm-bundler'; imp ...
Why is ColSpan used in this code snippet? Reference: https://material-ui.com/components/tables/#table Check for the arrow symbol <TableFooter> <TableRow> <TablePagination rowsPerPageOptions={[5, ...
My goal is to create a dropdown select using Material-UI within a redux-form. I found an example for incorporating M-UI's selects into a redux form on their website. I want to replicate the same example but using Material UI's MenuItems instead ...
I'm looking to customize the colors in my theme for specific categories within my application. I set up a theme and am utilizing it in my component like this: theme.tsx import { createTheme, Theme } from '@mui/material/styles' import { red } from '@mui/m ...
I've been struggling with Material UI's "Select" for quite some time now - spent about 10 hours trying to make it work the way I want. Any help would be greatly appreciated. This question is connected to a previous one: Select MenuItem doesn' ...
I'm currently utilizing React Hooks in my project. I am attempting to trigger an onclick event using the useRef hook. const component1: React.FC<Props> = props { const node =useRef<HTMLDivElement>(null); const ClickListe ...
In my MUI Datagrid, I have 2 columns for ID and City Name. There are only 3 cities represented in the table. Within a citizen object like this: const userMockup = { id: 1, name: "Citizen 1", cities: [1, 2], isAlive: true }; The cities ar ...
The material-ui paper component is implemented on my homepage and functioning correctly. However, when navigating to another page and returning to the homepage, the paper component disappears, leaving only text rendered. Can you help me identify the issue? ...
After finding a useful code snippet on this page to switch languages, I attempted to enhance it by incorporating material UI components for better styling. However, whenever I change the language, it redirects me back to the home page because the MenuList ...
Just got my hands on this amazing Material UI component <Tabs textColor="primary" indicatorColor="primary" > <Tab label="All Issues"/> </Tabs> The documentation states that indicatorColor and textColor can only be set to 'prima ...
After clicking on the lab version link provided for Autocomplete at this repository, I expected to find it in the core with version 4.11.2. However, it seems that it is still not accessible. ...
Having a bit of trouble with this situation - I want to allow users to select multiple days as a condition using toggleButtons from material-ui. I also want to include a plus button so they can add or remove sets of days. Any suggestions on how I can mak ...
let [number, set_number] = useState({x: 1}); <ChildComponent number={number} onUpdate={onUpdateFunction} </ChildComponent> set_number({x: 2}) After running set_number({x: 2}), will this action prompt the execution of onUpdateFunction refere ...
Hey there! I'm currently working on setting up a form to gather input for creating an event listing. I've been referencing the React documentation on how to use the 'value' property: https://reactjs.org/docs/forms.html ,to capture use ...
I have utilized a theme created from the following site: My requirement is to have the primary color as RED and the secondary color as BLUE. Additionally, I would like the AppBar to have a shade of grey. The preview showcases the AppBar in the desired col ...
My ReactJS app is built using hooks and StrictMode, with React version 16.13.1 and Material-UI version 4.9.10. The Appbar in my app utilizes Drawer: <div className={classes.root}> <AppBar position="static"> <Toolba ...
With the MUI Data Grid, users have the ability to click on a cell to bring it into focus, navigate through cells using keyboard arrows, and manually set the focused cell. One thing that I'm struggling with is determining which cell is currently in fo ...
My goal is to assign the cypress data-cy attribute as a helper text for a Material-UI TextField. I successfully adjusted the style of this helper text by providing a custom style property to FormHelperTextProps: FormHelperTextProps={{ sty ...
I've experimented with various CSS variations, but I'm unable to change the "focus" state of the outline-color/border-color for the Autocomplete Component. I've spent hours trying to figure out how to change the color to green instead of the current blue. ...
Looking for advice on how to properly place an image in an AppBar within the standard material height restrictions, like 64px for desktop? Currently utilizing material-ui@next (1.0.0-beta.2). This code snippet seems to work well: <AppBar> <To ...
Just starting out with Material-UI and jss, attempting to incorporate them into a project that uses right-to-left writing direction. Following the documentation, I managed to set it up and have all MUI components automatically adjust for RTL. However, the ...
Currently, I am incorporating material-ui-next dialog with CKEditor as the editor placed within the modal. In order to add LaTeX text, I have utilized the MathJax plugin. However, I have encountered an issue where I am unable to focus the input field to pr ...
I need assistance with a function that I use to incorporate Material UI text fields into my code. The issue I'm currently facing is figuring out how to dynamically add the "required" attribute based on a boolean parameter that determines whether the f ...
(adjust the output to trigger the md breakpoint and display cards in a row) Check out this link for reference. I'm attempting to add space between each card, but it doesn't seem to be working as expected. ...
Formik integration with Mui for a button component: import React from "react"; import { Button } from "@mui/material"; import { useFormikContext } from "formik"; const ButtonWrapper = ({ children, ...otherProps }) => { ...
My header.jsx file contains the following code: // Default Import Statements var Login = require(login.jsx) const HeaderComponent = React.createClass({ getInitialState () { return { loggedIn: false, }; }, render() { return ( ...
Hello, I've encountered a problem with rendering an image in my application. Let me explain the issue in a simplified manner. So, I have a card component (MyCardComponent) where I need to pass a string prop containing the image file location. The goal is ...
Is there a way to disable the automatic uppercase feature on the <Button> component in material UI 5? <Button variant="contained">Hello</Button> By default, the text will be displayed as HELLO, but I prefer it to remain as Hell ...
Issue: When I click a button on my material-table, it opens a full-screen dialog. However, after closing the dialog, I am unable to interact with any other elements on the screen. The dialog's wrapper container seems to be blocking the entire screen. This ...
I've been delving into React for a few hours now, but I'm struggling to achieve the desired outcome. My goal is to make the underline color of the Tabs white: https://i.stack.imgur.com/7m5nq.jpg And also eliminate the onClick ripple effect: https://i.st ...
I am having trouble figuring out how to remove the border around the <Select> component from the React Material UI library. In the image below, you can see that when the <Select> component is not selected, it has a black border/frame. https:// ...
I've been looking through GitHub and other resources, but I feel like I might be approaching this the wrong way. When using styled from @mui/material/styles, it creates random class names like this: https://i.stack.imgur.com/pdARg.png const TitleWra ...
My project includes 4 ButtonGroups from MUI, each with an SVG Icon and a button name as children. The background color of the button and the name change when selected, but the SVG icon remains the same color at all times. How can I make it so that the SVG ...
Hey there, I've got a fascinating question to discuss about snapping in Compose development. With the introduction of snapping as a 1st class API for LazyColumn, replacing the Snapper library, a new query has emerged. How can one initialize the LazyCo ...
Utilizing Material-UI along with material-table for my app. I have implemented a global theme in the "index.js" file using "ThemeProvider" and included the following components: <Fragment> <CssBaseline /> <MenuAppBar /> < ...
I am currently using a Material UI menu like this: <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={!!anchorEl} onClose={handleClose}> <MenuItem onClick={handleClose}>Profile</MenuItem> <MenuItem onClick={ ...
I've created a dynamic menu system in React using Material-UI that supports recursion for submenus. I'm aiming to implement the following features: 1. When a menu item is clicked, all other open submenus should close and focus on the clicked men ...
How can I bring this icon closer to the text? I'm not sure how to do it. When I enter developer mode, it shows me this. https://i.stack.imgur.com/WzhB1.png I am uncertain about what the purplish stuff indicates. My objective is to move the icon to the up ...
Exploring ways to enhance the Material-ui Button component by introducing new props. The objective is to introduce a new prop called fontSize with three size options - small, medium, large. <Button variant="outlined" color="primary" ...
When developing my React Js app, I decided to utilize the impressive libraries of Material UI v4. One particular component I customized is a Floating Action Button (FAB). The FAB component, illustrated as the red box in the image below, needs to remain p ...
Just a heads up, I'm working with material-ui using ReactJS and following the Redux pattern. Issue: I have an array that is being displayed in a List component with individual ListItems. However, when the array gets updated, the props change triggering t ...
In my React project using versions 15.6.2 and 16, along with material-ui@next version 1.0.0-beta.12, I encountered an issue with the Tooltip component. When I use the <Tooltip> inside a table header, the tooltip displays in the top left corner of the ...
The documentation for MUI(v5) includes an example highlighting the use of global style overrides: const theme = createTheme({ components: { MuiButton: { styleOverrides: { root: { // How to use pseudo-class here? // I ...
Encountering an issue when trying to expand the MUI color palette—getting this error instead: Error: Cannot read properties of undefined (reading 'dark') Take a look at my theme.ts file below: const theme = createTheme({ palette: { pri ...
I am looking to integrate MarkerClusterer into my Google Map using a library or component. Here is a snippet of my current code. Can anyone provide guidance on how I can achieve this with the google-map-react library? Thank you. const handleApiLoaded = ({ ...
I'm currently working on a React frontend project using Material UI. I've created a basic Paper component and I'm trying to change its background color to match the primary color set in ThemeProvider. Here's the snippet of my code: import React from 'react ...
I was looking through the official documentation and saw that the Checkbox component has a prop called labelPosition which can be set to either right or left. However, I am trying to figure out if it's possible to position the label above the checkbox ...
I'm currently working on integrating an autocomplete feature with checkboxes. Learn more here https://i.stack.imgur.com/YtxSS.png However, when trying to use the same component in final-form, I'm facing issues with checking my options. Why is that? Belo ...
Is there a way to properly align the <ChevronRightIcon> within the <PrimaryButton>? I want it to appear after the button label on the right side. https://i.stack.imgur.com/dcEWo.png <PrimaryButton style={{ paddingRight: &apo ...
When working on a React project with Material UI, I encountered an issue while trying to create a table. My goal was to make the entire row clickable, directing users to a page with additional information on the subject. Below is the snippet of code for th ...
Presently, I am developing a dynamic table using react and the structure is as follows: <TableBody> {finalLoadedTokensData.map((loadedToken, index) => { const isItemSelected = isSelected(loadedToken.contract); const label ...
Currently, I am in the process of setting up a form that includes a Material UI select field ranging from 1 to 50. My challenge is how to dynamically display multiple textfields for "First Name and Last Name" using Hooks each time the user selects a number ...
Wondering if there are any best practices or recommended strategies for addressing this particular scenario. At the moment, I am using the following Material-UI packages: "dependencies": { "@emotion/react": "^11.11.1", ...
I am currently working on creating a gallery using React Material UI (utilizing Card, ...). I am facing some challenges in making the gallery responsive, especially with varying cover sizes: https://i.stack.imgur.com/2n6vf.png Here is the code snippet I ...
When using the MUI Autocomplete component with the 'multiple' attribute, the value prop may return 0 or undefined when selecting an option. <Autocomplete value={v.education} onChange={handleEducationChange} className={classes.textOutline} multip ...
I am attempting to integrate material-ui with react-router and came across this example that seems to work smoothly: import { Router, Route, IndexRoute, browserHistory } from 'react-router'; import getMuiTheme from 'material-ui/styles/g ...
I am currently working on a project involving the DataGrid Component from Material-UI. While data can be displayed, I am encountering issues with the built-in sorting feature. When attempting to sort in ascending or descending order, it seems to be priorit ...
Currently, I am experimenting with an Info HOC in my React app: const InfoHOC = (HocComponent) => ({ message }) => ( <> <Tooltip title={message}> <InfoIcon /> </Tooltip> {HocComponent} </> ); ex ...
My application contains the following HTML: <div id="react-root-navbar"></div> <div id="react-root-body"></div> Along with React components that utilize React.DOM.render on each div. Both React components utili ...
Does React still require the use of zilverline's tap event plugin or has it been integrated directly into React's source code, eliminating the need for a tap delay? ...