Question

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

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

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

如何修改标准材质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 prop是一个对象，它将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 Properties样式，如下所示：

<form method='post' action='' ...... >

有关详细信息，请访问此website

Answer 3

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

看起来像这样：

<p className={classes.amendbody}>

然后用修饰体样式定义const，如下所示：

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


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

  }

});

希望这有助于某人。

Material UI组件上的CSS

3 个答案: