Блог

Главная - Вопросы по программированию - Как придать круглые углы заголовку таблицы пользовательского интерфейса материала

Как придать круглые углы заголовку таблицы пользовательского интерфейса материала

#reactjs #material-ui

Вопрос:

Я работаю с интерфейсом React и Material и пытаюсь придать заголовку таблицы радиус броудера 10 пикселей, чтобы только у заголовка таблицы были круглые углы. Проблема в том, что border-radius, похоже, вообще не работает на заголовке таблицы, как вы можете видеть на этом скриншоте: введите описание изображения здесь

Код (взят из официальных документов, я просто добавил стиль в заголовок таблицы):

 <TableContainer>
  <Table aria-label="customized table">
    <TableHead style={{ backgroundColor: '#E2E2E2', borderRadius: '10px' }}>
      <TableRow>
        <TableCell>Dessert (100g serving)</TableCell>
        <TableCell align="right">Calories</TableCell>
        <TableCell align="right">Fatamp;nbsp;(g)</TableCell>
        <TableCell align="right">Carbsamp;nbsp;(g)</TableCell>
        <TableCell align="right">Proteinamp;nbsp;(g)</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow key={row.name}>
          <TableCell component="th" scope="row">
            {row.name}
          </TableCell>
          <TableCell align="right">{row.calories}</TableCell>
          <TableCell align="right">{row.fat}</TableCell>
          <TableCell align="right">{row.carbs}</TableCell>
          <TableCell align="right">{row.protein}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>;

Как мне это сделать?

Комментарии:

1. Вы можете либо работать с системой стилей пользовательского интерфейса Material-ui ( material-ui.com/api/table-head/#css ) или вы можете работать против этого и попытаться выиграть «войну»специфичности селектора CSS. Как вы стилизуете другие элементы/компоненты в своем приложении?

2. все это делается с помощью JSS и makeStyles.

Ответ №1:

Насколько я знаю, нет способов установить радиус границы для всей таблицы, но проблему можно решить, используя отдельный радиус для первой и последней ячеек:

 const { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, makeStyles } = MaterialUI

const useStyles = makeStyles((theme) => ({
  table: {
    minWidth: 400,
  },
  thead: {
    backgroundColor: 'lightgray',
    'amp; th:first-child': {
      borderRadius: '1em 0 0 1em'
    },
    'amp; th:last-child': {
      borderRadius: '0 1em 1em 0'
    }
  }
}))

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein }
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
]

const App = function () {
  const classes = useStyles()

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="customized table">
        <TableHead classes={{ root: classes.thead }}>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">{row.name}</TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )}

ReactDOM.render(<App />, document.getElementById('root')) 
 <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@4.11.3/umd/material-ui.development.js"></script>

<div id="root"></div>

Ответ №2:

Вы можете продолжить использовать генератор makeStyles крючков для оформления заголовка таблицы.

 import { makeStyles } from '@material-ui/core/styles';

const useTableHeaderStyles = makeStyles({
  // .MuiTableHead-root
  root: {
    backgroundColor: '#E2E2E2',
    borderRadius: '10px',
  },
});

В компоненте:

 const tableHeaderClasses = useTableHeaderStyles();

...

<TableHead classes={tableHeaderClasses.root}>
  ...
</TableHead>

Метки: