Question

我正在使用FloatingActionButton，但不是最初的预期方式。因此我将背景颜色更改为白色，并更改了IconColor。我使用react-icons获取图标，而不是使用材质用户界面。

const iconStyle = {
  height: 64,
  width: 64,
  fill: 'green',
  color: 'green'
};

...

render(){
    return (
                    <FloatingActionButton
                    backgroundColor= 'white'
                    style={ buttonStyle }
                    iconStyle={ iconStyle }
                    zDepth={ 1 }>
                        {this.props.children}
                    </FloatingActionButton>
        );

如何在组件特定级别更改波纹颜色？

Answer 1

您必须定义自定义主题。

const muiTheme = getMuiTheme({
  floatingActionButton : {
    iconColor : '#666'        // desired ripple color
  }
});

render() {
  return (
    <MuiThemeProvider muiTheme={muiTheme}>
      <FloatingActionButton
        backgroundColor= 'white'
        style={ buttonStyle }
        iconStyle={ iconStyle }
        zDepth={ 1 }
      >
          {this.props.children}
      </FloatingActionButton>
    </MuiThemeProvider>
  );
}

另外，请勿忘记导入 getMuiTheme 和 MuiThemeProvider

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

可在此处找到更多信息。 http://www.material-ui.com/#/customization/themes

漂浮的Aciton按钮波纹颜色

1 个答案: