diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
index 5fa36fde0aac50..8ab4c15a58252c 100644
--- a/test/regressions/TestViewer.js
+++ b/test/regressions/TestViewer.js
@@ -1,37 +1,12 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { useFakeTimers } from 'sinon';
-import { withStyles } from '@material-ui/styles';
-import { createTheme, StyledEngineProvider } from '@material-ui/core/styles';
-
-const styles = (theme) => ({
- '@global': {
- html: {
- WebkitFontSmoothing: 'antialiased', // Antialiasing.
- MozOsxFontSmoothing: 'grayscale', // Antialiasing.
- // Do the opposite of the docs in order to help catching issues.
- boxSizing: 'content-box',
- },
- '*, *::before, *::after': {
- boxSizing: 'inherit',
- // Disable transitions to avoid flaky screenshots
- transition: 'none !important',
- animation: 'none !important',
- },
- body: {
- margin: 0,
- overflowX: 'hidden',
- },
- },
- root: {
- backgroundColor: theme.palette.background.default,
- display: 'inline-block',
- padding: theme.spacing(1),
- },
-});
+import Box from '@material-ui/core/Box';
+import GlobalStyles from '@material-ui/core/GlobalStyles';
+import { StyledEngineProvider } from '@material-ui/core/styles';
function TestViewer(props) {
- const { children, classes } = props;
+ const { children } = props;
// We're simulating `act(() => ReactDOM.render(children))`
// In the end children passive effects should've been flushed.
@@ -74,17 +49,39 @@ function TestViewer(props) {
return (
// TODO v5: remove once migration to emotion is completed
-
+
+
{children}
-
+
);
}
TestViewer.propTypes = {
children: PropTypes.node.isRequired,
- classes: PropTypes.object.isRequired,
};
-const defaultTheme = createTheme();
-export default withStyles(styles, { defaultTheme })(TestViewer);
+export default TestViewer;
diff --git a/test/regressions/fixtures/Menu/MenuContentAnchors.js b/test/regressions/fixtures/Menu/MenuContentAnchors.js
index 52eed220a76c1b..9fc5ce87b45928 100644
--- a/test/regressions/fixtures/Menu/MenuContentAnchors.js
+++ b/test/regressions/fixtures/Menu/MenuContentAnchors.js
@@ -4,55 +4,36 @@ import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
-import { makeStyles } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
-const useMenuStyles = makeStyles({
- anchorEl: {
- // give the anchor enough space so that the menu can align the selected item
- margin: '80px 0',
- },
- listItem: {
- '&$listItemFocusVisible': {
- border: '3px dashed black',
- },
- '&$listItemSelected': {
- border: '3px dotted black',
- },
- '&$listItemFocusVisible$listItemSelected': {
- border: '3px solid black',
- },
- },
- listItemFocusVisible: {},
- listItemSelected: {},
-});
+const MenuItemStyled = styled(MenuItem)(() => ({
+ '&.Mui-focusVisible': { border: '3px dashed black' },
+ '&.Mui-selected': { border: '3px dotted black' },
+ '&.Mui-focusVisible.Mui-selected': { border: '3px solid black' },
+}));
/**
* Item 1 or 2 can be pre-selected to check alignment between anchorEl and menuitem
*/
function SimpleMenu({ selectedItem, ...props }) {
const [anchorEl, setAnchorEl] = React.useState(null);
- const classes = useMenuStyles();
-
- const listItemClasses = {
- root: classes.listItem,
- focusVisible: classes.listItemFocusVisible,
- selected: classes.listItemSelected,
- };
return (
-
);
diff --git a/test/regressions/fixtures/Select/SelectChips.js b/test/regressions/fixtures/Select/SelectChips.js
index 6851cc785c3563..6c5253359a0d39 100644
--- a/test/regressions/fixtures/Select/SelectChips.js
+++ b/test/regressions/fixtures/Select/SelectChips.js
@@ -12,12 +12,7 @@ export default function SelectChips() {
value={values}
style={{ maxWidth: 100 }}
renderValue={(selected) => (
-
+
{selected.map((value) => (
))}
diff --git a/test/regressions/fixtures/Textarea/Textarea.js b/test/regressions/fixtures/Textarea/Textarea.js
index 6fc4b232477c56..618b47df6e8613 100644
--- a/test/regressions/fixtures/Textarea/Textarea.js
+++ b/test/regressions/fixtures/Textarea/Textarea.js
@@ -1,28 +1,10 @@
import * as React from 'react';
-import { makeStyles } from '@material-ui/styles';
import Input from '@material-ui/core/Input';
-const useStyles = makeStyles({
- input: {
- width: 200,
- },
- input1: {
- fontSize: 13,
- boxSizing: 'border-box',
- border: '10px solid black',
- },
- input2: {
- fontSize: 13,
- boxSizing: 'content-box',
- padding: 10,
- },
-});
-
function Textarea() {
const [value, setValue] = React.useState(
`Hey, sorry for being late to respond. Here is a codesandbox. It actually happens when I reduce the font-size of the input. Try adding some text or paste a long paragraph and you will the bottom margin being increased. It works fine with the default font-size.`,
);
- const classes = useStyles();
const handleChange = (event) => {
setValue(event.target.value);
@@ -31,34 +13,32 @@ function Textarea() {
return (