How to apply custom CSS in material table in react?

1
votes

Hi I am trying to apply custom CSS over material table but It is not working properly. I tried to do that using makeStyles function in material UI but still it's not working. I want the sorting arrow right after the text. Right now sorting arrow is coming left to the text. I also want both arrow together up arrow and down arrow together. I have created a function - 

const useStylesTableSort = makeStyles({
  root: {
    flexDirection: "unset",
  },
});

This is my material table code - 

<MaterialTable
  className={{useStylesTableSort.root}}
  style={{ flexDirection: "unset" }}
  title=""
/>

I want to add this function using className in material table but material table does not support className. style tag also not working. So how can I achieve this ? I want to change root css of MuiTableSortLabel. Any help would be appreciated.

2
reactjsmaterial-uimaterial-table
Did you refer material-table.com/#/docs/features/sorting ? - Shiladitya
for styling please refer material-table.com/#/docs/features/styling - Shiladitya

2 Answers

1
votes

You can override the Container component and add a className to the <Paper/>, this is the main container of the Material-table.

 <MaterialTable
   columns={[]}
   data={data}
   components={{
    Container: (props) => <Paper className={classes.filterTable} {...props}/>
        }}
  />

Another way is to use the Style property.

<MaterialTable
   columns={[]}
   data={data}
   style={{
   marginTop:'50px'
     }}
/>
-1
votes
const styles = {
 materialStyle: {
    flexDirection: "unset" 
    }
  }
};

function Table(props) {
  return (
<MaterialTable
className={props.classes.materialStyle}
    />
  );
}

export default withStyles(styles)(Table);

You can also refer on the this link: Add Styling on Material-UI