FlatButton 아이콘의 크기를 변경

Question

나는 (화면상의) 가상 키보드를 reactmaterial-ui 건 축하 고있다. 그리고 미래의 열쇠 크기를 구현하는 데 어려움을 겪고 있습니다. 나는 FlatButtton을 사용하고있다. label의 심볼 키를 표시 할 때 라벨을 사용할 때 크기를 바꿀 수있는 방법을 찾았으나 icon과 SvgIcon을 사용할 때 icon의 크기를 변경할 방법을 찾지 못했다. 나는 label과 labelStyle으로 시도했지만 텍스트는 label처럼 멋지게 보입니다. 내가 link 및 div를 제거하고 함께 getMuiTheme()을 대체하는 것입니다 수행하고있을 때, 내 생각을

let theme: MuiTheme = getMuiTheme(); 
theme.button.height += 10; 
theme.button.minWidth += 10; 
theme.flatButton.fontSize += 10; 

return (
    <MuiThemeProvider muiTheme={theme}> 
     <div> 
      <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500" rel="stylesheet" type="text/css"/> 
       <Keyboard 
        textField={textField} 
        open={this.state.open} 
        onRequestClose={this._onRequestClose} 
        onInput={this._onInput} 
        layout={[AlphaNumericKeyboard]} 
       /> 
     </div> 
    </MuiThemeProvider> 
); 

코드는 단지 개발을위한 것입니다 : 여기

내가 label의 크기를 변경하는 방법입니다 this.context.muiTheme 및 += 10은 = this.props.keySize입니다. 때 render 단지 icon하지만 render 사용하는 경우

React.cloneElement(icon, {style: {width: 34, height: 34}});

이 <FlatButton icon={React.cloneElement(icon, {style: {width: 34, height: 34}})} />;

그것은 크기가 24x24과 함께 항상 작동합니다

이

내가 icon의 크기를 변경하는 데 사용하는 코드입니다 . 난 theme.button.iconButtonSize += 10; 시도했지만 여전히 결과가 없습니다.

material-ui의 소스 코드를 탐색했지만 아직 크기를 변경할 수있는 방법을 찾지 못했습니다. 내가 FlatButton 용량 변화 margin 및 padding 것을 발견하고 공간이 충분하지 않습니다 생각하지만, 여전히 빈 42x42 공간의 합계이며,이 용량이 도움이되지 이후

이 마지막으로 생각 나는 ... 해봤됩니다

const noStyl: React.CSSProperties = { 
    marginLeft: 0, 
    marginRight: 0, 
    paddingLeft: 0, 
    paddingRight: 0 
}; 
keyboardKey = <FlatButton icon={React.cloneElement(icon, {style: {width: 34, height: 34}})} labelStyle={noStyl} />; 

FlatButton을 사용할 때 icon의 크기를 변경하는 방법이 있습니까? v0.15.2iconstyleprop의로

Answer 1

는 FlatButton/RiasedButton에서 스타일 icon 수있는 방법은 없습니다 (덮어된다.