CSS on Material UI components

问题

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

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

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.

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,
  },

});

回答1:

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

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

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

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);

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

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',    
  },
});

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>;

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

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

回答2:

To override the inline-styles of the root element try to change TableRow Properties style, like this :

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

For more information visit this website

回答3:

Actually, the problem is that you have to use the Material UI syntax for using classes.

It looks like this:

<p className={classes.amendbody}>

Then you define the const with an amendbody style, like this:

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


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

  }

});

Hope this helps someone.

来源：https://stackoverflow.com/questions/49125789/css-on-material-ui-components

标签

css

material-ui