Can I close the alert form MUI using the crossIcon?
I have a snackBar and inside an alert both from MUI. The issue is that I want to close the alert using a function and when clicking on the crossIcon, close it. I don't know why it's not working as…
Is there an issue importing material-ui search icons in Javascript?
import React from 'react' import {Search} from "@material-ui/icons/Search" const App = () => { return ( <div> <Search/> </div> ) } export default App export 'Search' (imported as 'Search') was not found in '@material-ui/icons/Search' (possible exports: __esModule, default) export 'Search'…
Can prop be passed to makeStyles in Javascript?
I have a component with a prop called styling. I pass inline styling here. I want to pass some styling I have written in makeStyles. The style I want to pass is: const useStyles = makeStyles((theme) => ({ fieldShape: {…
Reactjs – Why is the state of open null?
I try to use a prop value to set a state but it keeps giving me null. The prop value has a valid value (boolean). This is the constructor of the child component: constructor(props: any) { super(props); this.setState({ ...this.state, customUser:…
Reactjs – How to set Montserrat google font to entire NextJS application that uses MUI components?
I have been trying to use the Montserrat font in my Next js application. When I inspect the texts in browser, the font family is always roboto and same set of fallbacks. "Roboto","Helvetica","Arial",sans-serif I haven't made this set as my…
Css – MUI TextField outline overlaps label
I have a MUI TextField with and with default settings all look good: But if I size the font larger (see theme below) then the borderline overlaps the label: function MyForm() { return ( <> <div>a</div> <div><TextField variant={'outlined'} label="Type something"…
Does rowMouseEnter trigger in React Material UI Datagrid?
When I hover over any row in the Datagrid, I want the "Analyze" button to change from variant outlined to contained. I cannot get any event to trigger when the row is hovered over, nor can I find any information…
Can React render components inline with a condition?
I want to render a Home component if certain condition is met. I tried to use the Inline If-Else with Conditional Operator provided by React. My code looks like this: import Home from './components/Home'; ... <Box component="main" sx={{ flexGrow: 1,…
Does checking a task in a React app also check the one below it?
I'm creating a simple to do list app in React. I'm encountering a problem where checking an item also checks the one below it in the list: Even with a delay between checking the item & filtering the list: Any…
Css – Mui Button color onClick turning all tabs different color rather than active tab
I have a footer with 5 links, which I am using a Mui Button for with component={Link} to transform into links. The buttons are all black, I have a hover state that changes the button to green when hovered over,…