如何修改MUI TextField的边框圆角与按钮颜色？

TextField圆角设置 #

你之前直接给AppTextField加border-radius无效，是因为MUI的Outlined类型TextField的边框由内部<fieldset>元素渲染，需针对该内部元素设置样式。修改AppTextField样式如下：

export const AppTextField = styled(TextField)({
  backgroundColor: 'white',
  // 针对OutlinedInput容器及内部边框元素设置圆角
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderRadius: '8px', // 可按需调整圆角大小
    },
    // 聚焦状态下保持圆角
    '&.Mui-focused fieldset': {
      borderRadius: '8px',
    },
    // 鼠标悬浮状态下保持圆角
    '&:hover fieldset': {
      borderRadius: '8px',
    }
  }
})

如果你的TextField是filled类型，需将类名替换为& .MuiFilledInput-root，并给该元素设置border-radius。

按钮颜色调整 #

若ButtonStyled的红色未生效，是因为MUI内置样式优先级更高，可通过提高样式优先级解决：

export const ButtonStyled = styled(Button)({
  '&.MuiButton-contained': {
    backgroundColor: 'red',
    // 可选：设置鼠标悬浮时的颜色
    '&:hover': {
      backgroundColor: 'darkred',
    }
  }
})

也可使用!important强制覆盖（不推荐，但快速有效）：

export const ButtonStyled = styled(Button)({
  backgroundColor: 'red !important',
  '&:hover': {
    backgroundColor: 'darkred !important',
  }
})

完整修改后的styled.js代码 #

import styled from 'styled-components';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

export const AppTextField = styled(TextField)({
  backgroundColor: 'white',
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderRadius: '8px',
    },
    '&.Mui-focused fieldset': {
      borderRadius: '8px',
    },
    '&:hover fieldset': {
      borderRadius: '8px',
    }
  }
})

export const ButtonStyled = styled(Button)({
  '&.MuiButton-contained': {
    backgroundColor: 'red',
    '&:hover': {
      backgroundColor: 'darkred',
    }
  }
})

内容的提问来源于stack exchange，提问作者matheus035