Material UI: Style nested components in TablePagination

huangapple go评论82阅读模式
英文:

Material UI: Style nested components in TablePagination

问题

import { withStyles } from '@material-ui/core';
import MuiTablePagination from '@material-ui/core/TablePagination';

const styles = {
  root: {
    color: 'rgba(0, 0, 0, 0.87)',
    backgroundColor: '#b1c4cd',
    display: 'flex',
    justifyContent: 'center',
    fontSize: '14px',
    width: '100%'
  },
  actions: {
    button: {
      color: 'yellow' // not working
    },
    MuiButtonBase: {
      color: 'yellow' // not working
    }
  }
};

export const StyledTablePagination = withStyles(styles)(MuiTablePagination);
英文:

How do I style in the buttons with the actions panel of the TablePagination component?

import { withStyles } from '@material-ui/core';
import MuiTablePagination from '@material-ui/core/TablePagination';
  
const styles = {
  root: {
    color: 'rgba(0, 0, 0, 0.87)',
    backgroundColor: '#b1c4cd',
    display: 'flex',
    justifyContent: 'center',
    fontSize: '14px',
    width: '100%'
  },
  actions: {
    button: {
      color: 'yellow' // not working
    },
    MuiButtonBase: {
      color: 'yellow' // not working
    }
};
  
export const StyledTablePagination = withStyles(styles)(MuiTablePagination);

答案1

得分: 2

你可以简单地为IconButton本身添加样式:

const PaginationTheme = withStyles({
  actions: {
    color: 'red'
  }
})(TablePagination);

这是一个所有按钮都是红色的示例:

red buttons示例

你也可以使用按钮的类来更改它的样式:

const PaginationTheme = withStyles({
  actions: {
    '& .MuiButtonBase-root:not([disabled])': {
      color: 'red'
    }
  }
})(TablePagination);
英文:

You can simply add style to the IconButton itself :

const PaginationTheme = withStyles({
  actions:{
    color:'red'
  }
})(TablePagination);

Here's an example of all red buttons

You can also use the class of the button to change it's style:

const PaginationTheme = withStyles({
  actions: {
    '& .MuiButtonBase-root:not([disabled])':{
      color: "red"
    }   
  }
})(TablePagination);

huangapple
  • 本文由 发表于 2020年1月3日 19:33:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/59577906.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定