Как применить собственный CSS в таблице материалов в React?

Привет, я пытаюсь применить собственный CSS к таблице материалов, но он не работает должным образом. Я пытался сделать это с помощью функции makeStyles в пользовательском интерфейсе материала, но она все равно не работает. Мне нужна стрелка сортировки сразу после текста. Сейчас стрелка сортировки перемещается влево к тексту. Я также хочу, чтобы обе стрелки вместе, стрелка вверх и стрелка вниз, были вместе. Я создал функцию -

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

Это код моей таблицы материалов -

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

Я хочу добавить эту функцию, используя className в таблице материалов, но таблица материалов не поддерживает className. тег стиля тоже не работает. Итак, как я могу этого добиться? Я хочу изменить корневой CSS MuiTableSortLabel. Любая помощь будет оценена по достоинству.


reactjs material-ui material-table
person Anurag Mishra    schedule 08.05.2020    source источник
comment
Вы ссылались на material-table.com/#/docs/features/sorting? ?   -  person Shiladitya    schedule 09.05.2020
comment
для стиля см. material-table.com/#/docs/features/styling   -  person Shiladitya    schedule 09.05.2020

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете переопределить компонент Container и добавить className в <Paper/>, это основной контейнер таблицы материалов.

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

Другой способ - использовать свойство Style.

<MaterialTable
   columns={[]}
   data={data}
   style={{
   marginTop:'50px'
     }}
/>
person J.Bigham    schedule 10.09.2020

arrow_upward
-1
arrow_downward 

const styles = {
 materialStyle: {
    flexDirection: "unset" 
    }
  }
};

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

export default withStyles(styles)(Table);

Вы также можете обратиться по этой ссылке: Добавить стиль в Material-UI

person Rajdeep Ratan    schedule 08.05.2020
comment
Нет, мы не можем использовать className в таблице материалов. - person Anurag Mishra; 09.05.2020
comment
className не поддерживается таблицей материалов. Это неправильный ответ. - person ridvanaltun; 02.08.2020
comment
className не поддерживается таблицей материалов. Это бесполезный ответ - person Harshit Pant; 30.11.2020