Material-ui: CSS Bug

[acpower7]

I have spent almost a day trying to resolve this, but the SelectField/DropDownMenu is showing incorrect CSS.

I have removed all my CSS to avoid any overwriting issues and I still see that results.

I am using the code in the simple[ example]http://www.material-ui.com/#/components/dropdown-menul).

[aarondack]

@acpower7

It's hard to really know what's going on based on the information given if you could provide a code sample or a pen that would be really useful. It seems that somewhere the styles are being overwritten. I just whipped this up with the example you gave and everything is working on my end.

import React from 'react';
import { render } from 'react-dom';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

const styles = {
  customWidth: {
    width: 200,
  },
};

export default class DropDownMenuSimpleExample extends React.Component {

  constructor(props) {
    super(props);
    this.state = {value: 1};
  }

  handleChange = (event, index, value) => this.setState({value});

  render() {
    return (
      <div>
        <DropDownMenu value={this.state.value} onChange={this.handleChange}>
          <MenuItem value={1} primaryText="Never" />
          <MenuItem value={2} primaryText="Every Night" />
          <MenuItem value={3} primaryText="Weeknights" />
          <MenuItem value={4} primaryText="Weekends" />
          <MenuItem value={5} primaryText="Weekly" />
        </DropDownMenu>
        <br />
        <DropDownMenu
          value={this.state.value}
          onChange={this.handleChange}
          style={styles.customWidth}
          autoWidth={false}
        >
          <MenuItem value={1} primaryText="Custom width" />
          <MenuItem value={2} primaryText="Every Night" />
          <MenuItem value={3} primaryText="Weeknights" />
          <MenuItem value={4} primaryText="Weekends" />
          <MenuItem value={5} primaryText="Weekly" />
        </DropDownMenu>
      </div>
    );
  }
}

const Root = () => (
  <MuiThemeProvider>
    <DropDownMenuSimpleExample />
  </MuiThemeProvider>
);

render(
  <Root />,
  document.getElementById('app')
);

[acpower7]

Do you have any advise on what selectors I could possibly be overwriting?

thanks!

[oliviertassinari]

@lucasbento I have seen a very similar issues some days ago. I can't find it. You should be able to help here :).

[lewiscowper]

This is because the menu items are rendered as type button in <span> tags. You can fix this with the following CSS:

span[type=button],
div[type=button] {
  appearance: none;
  -webkit-appearance: none;
}

The div[type=button] selector is another material component where a div is produced as button, if you see the issue with another component, and don't use the div selector, you can probably add it and it should work flawlessly. :)

Hope it helps

[karanhiremath]

This solved the issue for me but a note for those using href or react-router to make their menu items links you will also need to add a[type=button] to the css above