材质UI组件上的CSS

我一直在尝试使用MaterialUI时遇到麻烦

我有一个材料界面表。我正试着把文字居中对齐

材质UI标准CSS有一个名为：MuiTableCell-root-60的元素。具有文本对齐：左的属性的。我找不到方法来覆盖那个设置。该表未以公开方式使用具有该名称的元素。我找不到办法在桌子上放一个中心对齐的选择器

如何修改标准材质UI CSS属性

我尝试了各种方法，包括将“中心对齐”添加到根选择器，但它被忽略了

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
    textAlign: 'center',

  },
  table: {
    minWidth: 700,
  },

});

---

要覆盖根元素的内联样式，请尝试更改TableRow属性样式，如下所示：

 const styles = {
  propContainer: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
    margin: '0 auto',
  },
};

---

要了解更多信息，请访问此

实际上，问题是您必须使用Material UI语法来使用类

看起来是这样的：

<p className={classes.amendbody}>

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },


  amendbody: {
    textAlign: 'center',
    fontSize: '1.6rem',
    fontWeight: '300',

  }

});

希望这对其他人有所帮助。

文档部分将解释如何重写TableCell根类的行为

按照问题中的描述定义类，并使用

with style

将其应用于组件：

import { withStyles } from 'material-ui/styles';

这是一个接受JSS对象（或返回此类对象的函数），将样式添加到文档中，并向包装的组件提供

classes

prop的函数：

export default withStyles(styles)(MyComponent);

classes

prop是一个将JSS中定义的类名映射到文档中真实类名的对象

要使表格单元格中的文本居中，您需要覆盖其

根类。首先定义执行此操作的JS，并将其传递给
with styles
，这样您就有了
类
属性（如上所述）：

constyles=theme=>({
居中：{
textAlign:'中心'，
},
});

呈现TableCell时，通过指定
classes
prop并将其设置为具有应被覆盖的类的对象来覆盖根类。在本例中，我们感兴趣的是更改
root
类：

constsimpletable=（{classes}）=>
甜点（100克）
蛋白质（g）
{data.map（n=>{
返回(
{n.name}
{n.蛋白质}
);
})}
;

在为
根目录指定的类中定义的属性将被覆盖

查看此示例（以及完整代码）。
Hi@Nani gord，感谢您的帮助。我找到了答案，并把它添加到下面。我希望它能帮助其他可能陷入困境的人。我的回答将帮助您了解如何覆盖Material UI组件中定义的默认类，这样您就不需要将单元格内容包装在
p
标记中。