材质 UI 样式框答案

【问题标题】：MaterialUI Styled Box材质 UI 样式框
【发布时间】：2022-07-19 18:51:41
【问题描述】：

我正在使用 Material UI 5。我想创建一个自定义盒子组件，这样我就不必在每次制作盒子时都定义相同的 sx 道具。我还希望所有的盒子看起来都一样。我阅读了这些文档，它把我引向了这个。

const StyledBox = styled(Box)({
          type: 'paper',
          borderRadius: 8,
          m: 4,
          alignItems:"center",
          justifyContent:"center",
          padding: 4,
          boxShadow: 12,
          backgroundColor: 'primary.light',
          '&.hover': {
            backgroundColor: 'primary',
            opacity: [0.9,0.8,0.7]
          }
          });

问题是当我尝试使用 StyledBox 时它似乎没有效果？当我使用 sx prop手动创建框时，它可以正常工作。但是当我用 StyledBox 包装时，我根本看不到任何盒子。谁能指出我正确的方向？

return (

          <StyledBox>
            <Stack spacing={1} sx={{width: 300}}>
            <Typography variant='h3' component='h3'>
              Modem Configuration   
            </Typography>
            <FormLabel>Tx Power Enable</FormLabel>
            <RadioGroup
            row
            defaultValue="On">
                <FormControlLabel value="On" control={<Radio />} label="On" />
                <FormControlLabel value="Off" control={<Radio />} label="Off" />
            </RadioGroup>
            <FormControl fullWidth>
            <FormLabel>Tx AGC Power</FormLabel>
            <Select
              value={TxAgcPower}
              onChange={changeTxAgcPower}
            >
              <MenuItem value={2}>2</MenuItem>
              <MenuItem value={3}>3</MenuItem>
              </Select>
            <FormLabel>Tx AGC Enable</FormLabel>
            <RadioGroup
            row
            defaultValue="On">
                <FormControlLabel value="On" control={<Radio />} label="On" />
                <FormControlLabel value="Off" control={<Radio />} label="Off" />
            </RadioGroup>
            <TextField id="filled-basic" label="Modem Tx Gain" variant="filled" />
            <TextField id="filled-basic" label="Tx Frequency" variant="filled" />
            <TextField id="filled-basic" label="Rx Frequency" variant="filled" />
            </FormControl>
            <FormLabel>Rx Gain Adjust</FormLabel>
            <Select
              value={RxGainAdj}
              onChange={changeRxGainAdj}
            >
              <MenuItem value={'low'}>Low</MenuItem>
              <MenuItem value={'high'}>High</MenuItem>
              </Select>
          <Button variant="contained">Apply</Button>
          </Stack>
        </StyledBox>
      );
}

【问题讨论】：

标签： javascript reactjs material-ui frontend

【解决方案1】：

看看这个在 MUI V5 中使用样式组件的例子中的语法，你会注意到你编写 css 的方式与你在传递 css 时使用 sx 属性（使用对象）时不同。

这里还有一个codesandbox 来玩css。

import * as React from "react";
import Box from "@mui/material/Box";
import styled from "@emotion/styled";

const StyledBox = styled(Box)`
  border-radius: 8px;
  margin: 15px;
  align-items: center;
  justify-content: center;
  padding: 15px;
  width: 300px;
  height: 300px;
  box-shadow: 1px 1px 5px 0px green;
  background-color: #cecece;
  transition: all .2s ease;
  &:hover {
    background: red;
  }
`;

export default function BoxSx() {
  return (
    <StyledBox />
  );
}

【讨论】：