Tabs missing effect

[kakariko-village]

Here's the component i use react-mdl tabs:

import React from 'react';
import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material.js';
import 'normalize.css/normalize.css';
import 'react-mdl/extra/css/material.cyan-red.min.css';
import { Tabs, Tab } from 'react-mdl';

export default class UserTabBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeTab: 0 };
  }
  render() {
    if (location.pathname.indexOf('users') > 0) {
      return (
        <Tabs activeTab={this.state.activeTab} onChange={(tabId) => { this.setState({ activeTab: tabId }); this.context.rootCallback(tabId); }} ripple>
          <Tab>PROFILE</Tab>
          <Tab>SETTINGS</Tab>
          <Tab>ACTIVITY</Tab>
        </Tabs>
      );
    }
    return null;
  }
}
UserTabBar.contextTypes = {
  rootCallback: React.PropTypes.func
};

The tabs were rendered without ripple effect and underline effect on active tabs: http://i.imgur.com/4wcTQZs.png

Parent component of UserTabBar:

import React from 'react';
import UserTabBar from 'widget/TabBar/UserTabBar';
import { Menu, MenuItem, IconButton, Textfield } from 'react-mdl';
import styles from './Header.scss';

export default class StickyHeader extends React.Component {
  render() {
    return (
      <div className={styles.header}>
        <h1>
          Home
        </h1>
        <div className={styles.headerRightContent}>
          <Textfield
            onChange={() => { console.log(document.getElementById('textfield-Search').value); }}
            label='Search'
            expandable
            expandableIcon='search'
            style={{ color: 'white', paddingTop: 15, paddingRight: 5 }}
          />
          <IconButton ripple name='more_vert' id='demo-menu-lower-right' style={{ color: 'white' }} />
          <Menu target='demo-menu-lower-right' align='right'>
            <MenuItem>Log Out</MenuItem>
            <MenuItem>Account</MenuItem>
            <MenuItem>Sign Out</MenuItem>
          </Menu>

        </div>
        <UserTabBar />
      </div>
    );
  }
}

[IsaiahPacheco]

Also seeing issue in CodePen example

[DirtyHairy]

That's a duplicate of #415 and #394 that should be fixed in 1.8.0 .

[tleunen]

Thanks @DirtyHairy :)