Below is an example of the correct syntax for v4 (“& $addIcon” nested within &:hover). Further down are some v5 examples. import * as React from “react”; import { render } from “react-dom”; import { Grid, makeStyles } from “@material-ui/core”; import AddIcon from “@material-ui/icons/Add”; const useStyles = makeStyles(theme => ({ outerDiv: { backgroundColor: theme.palette.grey[200], padding: … Read more
The documentation contains four steps for rtl support: Set the dir attribute on the body element. In my examples below, this is handled by the following: React.useLayoutEffect(() => { document.body.setAttribute(“dir”, isRtl ? “rtl” : “ltr”); }, [isRtl]); Set the direction in the theme. In my examples below, I am toggling between two themes: const ltrTheme … Read more
By using the breakpoints attribute of the theme, you can utilize the same breakpoints used for the Grid and Hidden components directly in your component. API theme.breakpoints.up(key) => media query Arguments key (String | Number): A breakpoint key (xs, sm, etc.) or a screen width number in pixels. Returns media query: A media query string … Read more
Deleted the old answer, because it’s no reason for existence. Here’s what you want: import React from ‘react’; import { makeStyles } from ‘@material-ui/core’; const useStyles = makeStyles({ firstStyle: { backgroundColor: props => props.backgroundColor, }, secondStyle: { color: props => props.color, }, }); const MyComponent = ({children, …props}) =>{ const { firstStyle, secondStyle } = … Read more
The Material UI palette is extendable, but you need to do a couple of things to create a new color and apply it to your Button component. First, let’s define a theme with a custom color variable. You can use augmentColor() to generate the PaletteColor so it can be consumed in your Button: import { … Read more
useRef is generic if you use it with TypeScript, so you can define the referenced element type like const ref = useRef<Type>(); Looking into the type definitions for the inputRef property in MaterialUI it states: /** * Pass a ref to the `input` element. */ inputRef?: React.Ref<any>; So for a fix you can define your … Read more
material-ui’s select component uses the mouseDown event to trigger the popover menu to appear. If you use fireEvent.mouseDown that should trigger the popover and then you can click your selection within the listbox that appears. see example below. import React from “react”; import { render, fireEvent, within } from “react-testing-library”; import Select from “@material-ui/core/Select”; import … Read more
I had the same error and solved it by first asking if the array existed. Example: <Filter> { product.color?.map((c) => ( <FilterColor color = {c} key = {c} /> ))}; </Filter>
The problem is the SSR rendering in Next.js, which produces the style fragment before the page is rendered. Using Material UI and Next.js (as the author is using), adding a file called _document.js solved the problem. Adjusted _document.js (as suggested here): import React from ‘react’; import Document, { Html, Head, Main, NextScript } from ‘next/document’; … Read more
Here is an example demonstrating the keyframes syntax within makeStyles: import React from “react”; import ReactDOM from “react-dom”; import { makeStyles } from “@material-ui/core/styles”; import Button from “@material-ui/core/Button”; import clsx from “clsx”; const useStyles = makeStyles(theme => ({ animatedItem: { animation: `$myEffect 3000ms ${theme.transitions.easing.easeInOut}` }, animatedItemExiting: { animation: `$myEffectExit 3000ms ${theme.transitions.easing.easeInOut}`, opacity: 0, transform: “translateY(-200%)” … Read more