更改FlatButton图标大小

我正在构建reactmaterial-ui虚拟（屏幕上）键盘。而且我很难实现关键尺寸的未来。我正在使用FlatButtton当我使用标签来显示符号键时，我想了一个方法来更改label的尺寸，但是在使用icon和SvgIcon时我还没有找到更改icon的尺寸的方法。我尝试过label和labelStyle，但与文本label不一样。更改FlatButton图标大小

Screenshot

这是我如何改变label的大小：

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> 
);

的代码只是用于开发，我的想法时，我所做的就是删除link和div，代之以getMuiTheme()this.context.muiTheme和+= 10与= this.props.keySize。

这是我用来改变icon的大小不同的代码：

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

这时候我render使用的作品时，我render只是icon但<FlatButton icon={React.cloneElement(icon, {style: {width: 34, height: 34}})} />;

它总是与大小为24x24 。我已经尝试过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的尺寸？

来源

2016-08-02 Иво Стратев

如果您正在使用SVG的图标，那么很可能'viewBox'属性是你想要的。就拿一看看页面底部的可用svg-icons属性 - http://www.material-ui.com/#/components/svg-icon –

'''viewBox'''只能缩小尺寸（我需要增加尺寸）.'''''''''表示图标应该放置在svg元素中的大小，我不想改变这个元素的大小 –

可以通过'viewBox'增加图标的大小，它可以接受四个值：' x1 y1 x2 y2'，其中（x1，y1）代表左上角，（x2，y2）代表右下角。 Svg图标本身将在这些坐标之间伸展。默认情况下，该值为'0 0 24 24'，以增加您可以使用的图标大小，例如'0 0 36 36'。 –

由于v0.15.2iconstyleprop是被覆盖（没有从FlatButton/RiasedButton方式风格icon。

来源

2016-08-02 11:03:51

从'v0.15.3'开始'图标'风格''道具'beeing merged.with默认样式。 –

更改FlatButton图标大小

回答

相关问题