반응 재료를 사용자 정의하는 방법 다음 부품

Question

사용하고 있습니다 Material UInext branch 테이블 구성 요소를 사용하고 싶습니다. TableHead 구성 요소의 스타일을 변경하고 싶습니다.

내 생각은 TableHead를 MyTableHead로 포장하고 내 스타일을 추가하여 현재 스타일을 덮어 쓰는 것이 었습니다. (이 Composition 기준)

내 코드 :

import React from 'react'; 
import injectSheet from 'react-jss' 
import { 
    TableHead, 
} from 'material-ui/Table'; 

const styles = { 
    th: {   
     fontSize:'20px',   
    },  
} 

const _MyTableHead = (props) => { 
    return (
     <TableHead className={props.classes.th} {...props}> 
      {props.children} 
     </TableHead> 
    ); 
}; 
_MyTableHead.muiName = 'TableHead'  
const MyTableHead = injectSheet(styles)(_MyTableHead); 


export {MyTableHead} 

이 작동하지 않습니다
1. 내 스타일은
2. 내가 브라우저 JS 콘솔에서 오류가 원래의 스타일에 의해 오버라이드한다 :

경고 : 알 수없는 소품 sheet, classes 태그에. 요소에서 소품을 제거하십시오.

내가 바로 그 일을하고 있지 않다 생각 (JSS (_MyTableHead)에 의해 생성) _MyTableHead에서 : 자세한 내용은 (15 table.js에서) TableHead에서 (TableHead에 의해 생성) THEAD 에서 https://facebook.github.io/react/warnings/unknown-prop.html 참조 , 어떤 생각?

Answer 1

다음 분기에서 구성 요소를 사용자 정의하는 방법은 아직 문서화되어 있지 않습니다.
이는 그것을 할 수있는 방법이다 : 당신이 미리 설정된 클래스와 어떤 하나 개의 클래스를 오버라이드 (override) 할 수 없을 것 있도록

import React from 'react'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import {createMuiTheme} from 'material-ui/styles/theme' 
import Button from 'material-ui/Button'; 

const muiTheme = createMuiTheme({ 
    overrides:{ 
    MuiButton:{ 
     root:{ 
     fontSize: 20, 
     } 
    } 
    } 
}); 

class Main extends React.Component { 
    render() { 
    // MuiThemeProvider takes the theme as a property and passed it down the hierarchy 
    // using React's context feature. 
    return (
     <MuiThemeProvider muiTheme={muiTheme}> 
     <Button raised>Default</Button> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default Main; 

Answer 2

Example Class from MUINext

재료 UI는 렌더링에 새로운 클래스를 생성합니다.

클래스 이름은 MuiRoot-tableHead-23입니다. 마지막 숫자는 무작위입니다. 클래스를 오버라이드 (override)하는 특정 클래스를 찾아 이미 설정을 테마 파일이있는 경우 다음

[class*=MuiRoot-tableHead]{ 
your css settings 
} 

를 사용 , 나는 요시는 말과 함께가는 게 좋을 것. 그렇지 않으면이 메서드를 사용하여 수동으로 재정의 할 수 있습니다.