ReactJS + Material-UI:如何减少Material-UI的<TableRow />的列宽？

Question

我目前正在使用ReactJS + Material-UI,而使用Material-UI <Table>,列宽会根据内容自动设置.目前似乎在所有列上强制执行相等的宽度,但我希望某些列占用的宽度比其他列宽.

那么有没有办法任意分配<TableRow>列的宽度,而仍然是基于内容的动态？

Answer 1

您可以设置TableHeaderColumn的样式及其对应的TableRowColumns.下面我将宽度设置为12像素(背景颜色为黄色只是为了进一步演示自定义样式)

工作jsFiddle:https://jsfiddle.net/0zh1yfqt/1/

const {
  Table,
  TableHeader,
  TableHeaderColumn,
  TableBody,
  TableRow,
  TableRowColumn,
  MuiThemeProvider,
  getMuiTheme,
} = MaterialUI;

 class Example extends React.Component {
  render() {
    const customColumnStyle = { width: 12, backgroundColor: 'yellow' };

    return (
      <div>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>A</TableHeaderColumn>
              <TableHeaderColumn style={customColumnStyle}>B</TableHeaderColumn>
              <TableHeaderColumn>C</TableHeaderColumn>
            </TableRow>            
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableRowColumn>1</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>2</TableRowColumn>
              <TableRowColumn>3</TableRowColumn>
            </TableRow>
            <TableRow>
              <TableRowColumn>4</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>5</TableRowColumn>
              <TableRowColumn>6</TableRowColumn>
            </TableRow>
            <TableRow>
              <TableRowColumn>7</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>8</TableRowColumn>
              <TableRowColumn>9</TableRowColumn>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    );
  }
}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);