如何更改表材料UI / React的宽度？

Question

我正在使用React.JS和Material UI制作应用程序。

我将表组件用于我的应用程序。我可以改变列的宽度，但我不能改变表的宽度。

表格的宽度应与标题组件的宽度相同。（紫色）。

我怎样才能做到这一点？

请查看下面的当前视图。我会很感激任何建议。非常感谢你的帮助。

index.js

import React from 'react';
import {
Table,
TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
TableRowColumn,
} from 'material-ui/Table';
import Check from './img/check.png';
import Fail from './img/fail.png';
import Master from './img/Master.png';
import Visa from './img/Visa.png';
import Paypal from './img/Paypal.png';

class PaymentTable extends React.Component {
render() {
return(
  <Table>
  <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
  <TableRow>
    <TableHeaderColumn></TableHeaderColumn>
    <TableHeaderColumn>Today</TableHeaderColumn>
    <TableHeaderColumn>Payment Method</TableHeaderColumn>
    <TableHeaderColumn>Narrative</TableHeaderColumn>
    <TableHeaderColumn>Amount</TableHeaderColumn>
  </TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false}>
  <TableRow>
    <TableRowColumn><img src={Check} alt="Check" className="Check"/>
</TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Master} alt="Master" 
    className="Master"/>MasterCard...4483</TableRowColumn>
    <TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long 
    Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)
   </TableRowColumn>
    <TableRowColumn>$912.51</TableRowColumn>
  </TableRow>
  <TableRow>
    <TableRowColumn><img src={Check} alt="Check" className="Check"/>
   </TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Paypal} alt="Paypal" className="Paypal"/>PayPal</TableRowColumn>
    <TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
    <TableRowColumn>$912.51</TableRowColumn>
  </TableRow>
  <TableRow>
    <TableRowColumn><img src={Check} alt="Check" className="Check"/></TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Visa} alt="Visa" className="Visa"/>VISA...1532</TableRowColumn>
    <TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
    <TableRowColumn>$912.51</TableRowColumn>
  </TableRow>
  <TableRow>
    <TableRowColumn><img src={Fail} alt="Fail" className="Fail"/></TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Visa} alt="Visa" className="Visa"/>VISA...1532</TableRowColumn>
    <TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
    <TableRowColumn>$912.51</TableRowColumn>
  </TableRow>
  <TableRow>
     <TableRowColumn><img src={Check} alt="Check" className="Check"/></TableRowColumn>
    <TableRowColumn>12N35, 22 March 2017</TableRowColumn>
    <TableRowColumn><img src={Master} alt="Master" className="Master"/>MasterCard...4483</TableRowColumn>
    <TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
    <TableRowColumn>$912.51</TableRowColumn>
  </TableRow>
 </TableBody>
 </Table>
 );
 }
 }
 export default PaymentTable;

的style.css

  .table {
   width: 1200px;
   }

**编辑**

我根据建议编辑。现在，宽度加宽但不覆盖窗口的宽度。相反，桌子下面出现了一个滑动条。

Answer 1

使用style={}支柱向Table组件覆盖宽度。一个例子如下：

<Table style={{ width: 1200 }}>