材质UI组件上的CSS [英] CSS on Material UI components

问题描述

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

I keep running into trouble in trying to use Material UI.

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

I have a Material UI table. I'm trying to centre align the text.

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

The Material UI standard CSS has an element called: MuiTableCell-root-60. That has a attribute with text-align: left. I can't find a way to override that setting. The table doesn't use an element with that name in an exposed way. I can't find a way to put a centre aligned selector on the table.

如何修改标准的Material UI CSS属性?

how do you modify standard Material UI CSS attributes?

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

I've tried various things, including adding centre align to the root selector, but it gets ignored.

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

  },
  table: {
    minWidth: 700,
  },

});

推荐答案

The Overrides with Classes section of the documentation will explain how you can override the behavior of the TableCell's root class.

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

Define your classes as you describe in your question and apply them to your component using withStyles:

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

这是 HOC ，它接受JSS对象(或函数返回这样的对象)，将样式添加到文档中，并为包装的组件提供classes道具:

This is a HOC that accepts a JSS object (or function returning such an object), adds the styles to the document, and supplies a classes prop to the wrapped component:

export default withStyles(styles)(MyComponent);

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

The classes prop is an object that maps the class names defined in your JSS to the real class names in the document.

要在TableCell中居中放置文本，您要覆盖其root类.首先定义将要执行此操作的JSS，然后将其传递给withStyles，以使您拥有一个classes属性(如上所述):

To center the text in a TableCell you want to override its root class. Begin by defining the JSS that would do this, and pass it to withStyles so that you have a classes prop (as described above):

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

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

When rendering your TableCell, override the root class by specifying a classes prop and setting it to an object with the classes that should be overridden. In this case, we're interested in changing the root class:

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指定的类中定义的属性将被覆盖.

Attributes defined in the class specified for root will be overridden.

有关有效示例(以及完整代码)，请参见代码沙箱.

See this codesandbox for a working example (and the full code).

这篇关于材质UI组件上的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！