Skip to content

FlatButton and RaisedButton overwrite styles on icon (no way to style icons) #4874

@NoHomey

Description

@NoHomey

Problem description

FlatButton and RaisedButton overwrite styles on icon (no way to style icons).

Steps to reproduce

import * as React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Keyboard from 'material-ui/svg-icons/hardware/keyboard';
import FlatButton from 'material-ui/FlatButton';
import { render as ReactDomRender } from 'react-dom';
import * as injectTapEventPlugin from 'react-tap-event-plugin';
const { div, link } = React.DOM;

class Demo extends React.Component {
    render() {
        const icont = React.cloneElement(<Keyboard />, {style: {width: 100, height: 100, color: 'red'}});
        let theme = getMuiTheme();
        theme.button.height = 120;
        theme.button.minWidth = 200;
        return (
            <MuiThemeProvider muiTheme={theme}>
                <div>
                    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500" rel="stylesheet" type="text/css"/>
                    {icon}
                    <FlatButton icon={icon} />
                </div>
            </MuiThemeProvider>
        );
    }
}

injectTapEventPlugin();
let bootstrapNode = document.createElement('div');
ReactDomRender(<Demo />, bootstrapNode);
document.body.appendChild(bootstrapNode);

Versions

  • Material-UI: 0.15.2
  • React: 15.2.1
  • Browser: Google Chrome Version 52.0.2743.82 (64-bit)

Description

FlatButton and RaisedButton overwrite styles on icon (no way to style icons).

Images & references

Screenshot

-->

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: buttonChanges related to the button.scope: iconsChanges related to the icons.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions