Material UI 组件上的 CSS

Question

我在尝试使用 Material UI 时一直遇到麻烦。

我有一个 Material UI 表。我正在尝试将文本居中对齐。

Material UI 标准 CSS 有一个名为：MuiTableCell-root-60 的元素。它有一个带有 text-align: left 的属性。我找不到覆盖该设置的方法。该表不会以公开的方式使用具有该名称的元素。我找不到将中心对齐选择器放在桌子上的方法。

如何修改标准 Material UI CSS 属性？

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

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

  },
  table: {
    minWidth: 700,
  },

});

Answer 1

文档的Overrides with Classes 部分将解释如何覆盖 TableCell 根类的行为。

按照您在问题中的描述定义您的类，并使用withStyles 将它们应用于您的组件：

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

这是一个HOC，它接受 JSS 对象（或返回此类对象的函数），将样式添加到文档，并为包装的组件提供 classes 属性：

export default withStyles(styles)(MyComponent);

classes 属性是一个对象，它将 JSS 中定义的类名映射到文档中的真实类名。

要使 TableCell 中的文本居中，您需要覆盖其 root 类。首先定义将执行此操作的 JSS，并将其传递给 withStyles 以便您拥有 classes 属性（如上所述）：

const styles = theme => ({
  centered: {
    textAlign: 'center',    
  },
});

在渲染 TableCell 时，通过指定 classes 属性来覆盖根类，并将其设置为具有应被覆盖的类的对象。在这种情况下，我们有兴趣更改 root 类：

const SimpleTable = ({ classes }) =>
  <Paper>
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>Dessert (100g serving)</TableCell>
          <TableCell numeric>Protein (g)</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map(n => {
          return (
            <TableRow key={n.id}>
              <TableCell classes={{ root: classes.centered }}>{n.name}</TableCell>
              <TableCell numeric>{n.protein}</TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  </Paper>;

在为root 指定的类中定义的属性将被覆盖。

请参阅此codesandbox 以获取工作示例（和完整代码）。

Answer 2

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

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

欲了解更多信息，请访问website

Answer 3

实际上，问题在于您必须使用 Material UI 语法才能使用类。

看起来像这样：

<p className={classes.amendbody}>

然后你用 amendbody 样式定义 const，像这样：

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


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

  }

});

希望这对某人有所帮助。