ReactJS + Material-UI : Material-UI <Table/> 사이의 색상을 대체하는 방법 <TableRow/>?

Question

현재 Material-UI의 <Table/> (http://www.material-ui.com/#/components/table)을 가지고 있으며 각 행을 파란색과 자주색으로 전환하고 싶습니다. 그래서 처음에는 파란색이고, 다음 행은 보라색이 될 것입니다. 추가되는 모든 행이 추가됩니다.

추가 행을 추가 할 때 두 색상을 어떻게 자동으로 끌 수 있습니까?

render(){ 

    return(
     <Table 
      multiSelectable={true} 
     > 
      <TableHeader> 
      <TableRow> 
       <TableHeaderColumn>First Name</TableHeaderColumn> 
       <TableHeaderColumn>Last Name</TableHeaderColumn> 
       <TableHeaderColumn>Color</TableHeaderColumn> 
      </TableRow> 
      </TableHeader> 
      <TableBody 
      displayRowCheckbox={true} 
      stripedRows 
      > 
       <TableRow> 
       <TableRowColumn>John</TableRowColumn> 
       <TableRowColumn>Smith</TableRowColumn> 
       <TableRowColumn>Red</TableRowColumn> 
       </TableRow> 
       <TableRow> 
       <TableRowColumn>Paul</TableRowColumn> 
       <TableRowColumn>Row</TableRowColumn> 
       <TableRowColumn>Black</TableRowColumn> 
       </TableRow> 
       <TableRow> 
       <TableRowColumn>Doe</TableRowColumn> 
       <TableRowColumn>Boe</TableRowColumn> 
       <TableRowColumn>Pink</TableRowColumn> 
       </TableRow> 
       <TableRow> 
       <TableRowColumn>Frank</TableRowColumn> 
       <TableRowColumn>Done</TableRowColumn> 
       <TableRowColumn>White</TableRowColumn> 
       </TableRow> 
       <TableRow> 
       <TableRowColumn>Lucy</TableRowColumn> 
       <TableRowColumn>Ju</TableRowColumn> 
       <TableRowColumn>Orange</TableRowColumn> 
       </TableRow> 
      </TableBody> 
     </Table> 

당신은 행의 시각적 분리를 만들기 위해 <TableBody> 구성 요소에 대한 stripedRows 소품을 사용할 수 있습니다 사전

Answer 1

에 감사합니다,하지만 난 당신이 옵션 색상을 사용자 정의 할 수 있습니다 모르겠어요.

<TableBody stripedRows > </TableBody> 

또는 당신은 className<TableBody>에 대한 구성 요소를 설정하여 달성하고, CSS를 even and odd rules와 색상을 설정할 수 있습니다. 아마도 해당 규칙이 인라인 스타일을 재정의하도록 !important을 설정해야합니다.