Блог

Я пытался повысить верификацию пользовательского интерфейса до 5(с 4). Я следовал документации по переходу от способа создания стилей для определения класса к стилизованному API. Но имена классов, определенные во вложенном компоненте/элементе, не принимают стили, определенные утилитой styled.

 import React from 'react';
import {styled} from '@mui/material/styles';
import Box from "@mui/material/Box";
import theme from "../../../theme/theme";
import FormControl from "@mui/material/FormControl";
import {Dialog, DialogContent, Select} from "@mui/material";
import MenuItem from "@mui/material/MenuItem";


const PREFIX = 'AnalysisCalculatorModal';

const classes = {
    childFormControl: `${PREFIX}-childFormControl`,
    childFormControlSelectRoot: `${PREFIX}-childFormControlSelectRoot`
};


const themeColor = theme.palette.primary.main;
const StyledTypography = styled(Typography)({color:'red'});

const Root = styled('div')(({
    [`amp; .${classes.childFormControl}`]: {
        marginTop: "13px",
        fontSize: '10px',
        backgroundColor:'red',   
        "amp; input::placeholder": {
            fontSize: "10px"
        }
    },
   [`amp; .${classes.childFormControlSelectRoot}`]: {
      fontSize: '14px'
   },
   [`amp; .${classes.title}`]: {
    color: 'red'
   },
}));


export function AnalysisCalculatorModal(props) {
    return (
        <Root>
            <Dialog
                maxWidth={"md"}
                fullWidth
                aria-labelledby="customized-dialog-title"
                open={true}
                scroll="body">
                <DialogContent>
                    <StyledTypography>Working Title</StyledTypography> // this works fine!!!! but I want styles to be applied to below Typography
                    <Typography className={classes.title}>Title</Typography>
                    <Box className={'d-flex'}>
                        <FormControl size={'small'}
                                     classes={{root: classes.childFormControl}}
                                     style={{maxWidth: '80px'}}
                                     variant="outlined">
                            <Select
                                classes={{root: classes.childFormControlSelectRoot}}
                                value={'A'}>
                                <MenuItem value={"A"}>A</MenuItem>
                                <MenuItem value={'B'}>B</MenuItem>
                            </Select>
                        </FormControl>
                    </Box>
                </DialogContent>
            </Dialog>
        </Root>
    );
}
 

В приведенном выше фрагменте кода стили, определенные в классах «classes.childFormControl» и «classes.title», не применяются. но тот же код работает, если я использую стили создания(в версии 4).
В компоненте стиля StyledTypography стили применяются правильно.
Я что-то упускаю ?

index.js

 import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
import theme from "./theme/theme"

ReactDOM.render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <App />
      </ThemeProvider>
    </StyledEngineProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
 

пакет.json

     "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.13",
    "@mui/icons-material": "^5.1.0",
    "@mui/lab": "^5.0.0-alpha.54",
    "@mui/material": "^5.1.0",
    "@mui/styles": "^5.1.0",