React项目中如何修改Material UI的Card组件相关样式

你当前的写法错误在于，MUI的overrides全局组件样式覆盖配置属于主题配置项，不能写在makeStyles方法的入参中，所以你定义的.MuiCardActions-root样式不会生效。

你可以选择以下两种方案实现需求：

方案1：仅局部修改当前Card的CardActions样式（推荐，不影响其他页面的Card组件） #

第一步：把你写在overrides中的样式单独提取为一个自定义类，修改你的useStyles代码：

const useStyles = makeStyles({
  // 新增cardActions自定义类，替换原来的overrides配置
  cardActions: {
    display: 'flex',
    alignItems:"center",
    padding: 8,
    flexDirection: "row-reverse",
  },
  // 原有card、bullet、title等其他样式保留不变
  card: {
    width: 700,
    height:250,
    backgroundColor: "#009CA7",
    color:"white",
    borderRadius: 25,
    margin: 15,
    textAlign: 'right',
    fontFamily:"LTAzer-Regular", // 你已经解决字体问题，直接放开注释即可
  },
  // 剩下的原有样式保持不变...
});

第二步：给你的CardActions组件绑定这个自定义类，修改渲染代码：

<CardActions className={classes.cardActions}>
  <Button className={classes.button} size="small">details</Button>
</CardActions>

方案2：全局覆盖所有CardActions组件的样式 #

如果需要全站所有的CardActions都应用flex-direction: row-reverse的样式，你可以通过自定义主题实现：
首先在项目根组件（通常是App.js）中定义自定义主题，并用ThemeProvider包裹业务组件：

import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import SimpleCard from './SimpleCard';

// 定义自定义主题，把overrides配置放在这里
const customTheme = createTheme({
  overrides: {
    MuiCardActions: {
      root: {
        display: 'flex',
        alignItems:"center",
        padding: 8,
        flexDirection: "row-reverse",
      },
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 所有子组件都会继承该主题配置 */}
      <SimpleCard />
    </ThemeProvider>
  );
}

export default App;

这种方案就不需要再给单个CardActions绑定自定义类了，所有的CardActions组件都会自动应用你配置的样式。

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