DropDownMenu default label style not consistent?

[vmaudgalya]

Hi, I've found that when I insert a DropDownMenu in different locations in my code, the default label style is not consistent.

Here is some code where I see an inconsistency:

import React from 'react'
import { RaisedButton, TextField, DropDownMenu } from 'material-ui'
import injectTapEventPlugin from 'react-tap-event-plugin'
injectTapEventPlugin()

const Details = React.createClass({

  _handleItemSubmit() {
    console.log('submitted item');
  },

  render() {
    let options = [
       { payload: '1', text: 'First' },
       { payload: '2', text: 'Second' }
    ]

    return (
      <div>
        <TextField
          hintText="Class"
          floatingLabelText="Class" />
        <DropDownMenu menuItems={options}/>
        <RaisedButton label="Submit" primary={true} onClick={this._handleItemSubmit}/>
      </div>
    )
  }

})

export default Details

And here is how it appears:

When closed:

When open:

Sometimes this issue is there, and sometimes it is not. At first I thought it was because some other styling was overwriting the DropDownMenu's style props but after removing all other styling, it seems like this certainly may be an issue.

Adding this as a property to the DropDownMenu seems to fix this issue.

labelStyle={{fontFamily: 'Roboto, sans-serif'}}

I've looked through the updates to this file and it seems like labelStyle might be deprecated soon.
How can this be fixed? Should it be, if it will be deprecated soon? I wouldn't mind making the PR myself! 😋

[oliviertassinari]

That looks like a bug.
I think that the font family should be applied to the root element.
It should be something like /~https://github.com/callemall/material-ui/blob/master/src/tabs/tab.jsx#L110.
A PR is welcomed 👍