如何更改表材料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={}prop覆盖宽度Table。一个例子看起来像：

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