边框悬停周围的材质 ui

Question

我希望当文本字段悬停时，然后文本字段悬停在边框周围时。我无法设置边框。我是 Material UI 新手。请有人帮助我吗？怎么解决呢？这是我的全部代码。

import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/material/styles';

const Shipping = () => {
  const Border = styled(Box)(() => ({
    padding: '2',
    marginTop: '60px',
    select: {
        borderColor: 'red',
    },
  }));

  return (
    <Box>
      <Typography variant="h5">Shipping Information</Typography>

      <Border>
        <Typography variant="caption" display="block">
          Caeleb Dressel
        </Typography>
        <Typography variant="caption" display="block" marginTop="24px">
          [phone]
        </Typography>
        <Typography variant="caption" display="block" marginTop="24px">
          [email protected]
        </Typography>
        <Typography variant="caption" display="block" marginTop="24px">
          417 Wahignton Ave. Green cove Springg, Plorida 39495
        </Typography>
      </Border>
    </Box>
  );
};

export default Shipping;

Answer 1

您可以像这样在悬停时显示边框：

const Border = styled(Box)(() => ({
    padding: "2",
    marginTop: "60px",
    border: "1px solid white",
    "&:hover": {
      borderColor: "red"
    }
  }));

您可以查看 this StackBlitz，了解此解决方案的实时工作示例。