material-ui styling tabs with styled-components

styling.js

import React, { Component } from 'react';
import styled from 'styled-components';
import { Tabs, Tab } from '@material-ui/core';

const StyledTabs = styled(props => {
  return <Tabs {...props} classes={{indicator: 'indicator'}}></Tabs>
})`
  && {
    border-bottom: 1px solid yellow;
  }
  && .indicator {
    background-color: #1F6FF7;
  }
`;

const StyledTab = styled(Tab)`
  && {
    color: #1F6FF7;
    text-transform: none;
  }
`;

class MyTabs extends Component {
  state = { tab: 0 }

  handleChangeTab = (e, tab) => {
    this.setState({ tab })
  }

  render() {
    const {tab} = this.state;
    return (
        <StyledTabs centered value={tab} onChange={this.handleChangeTab}>
          <StyledTab label="tab1"></StyledTab>
          <StyledTab label="tab2"></StyledTab>
        </StyledTabs>
     );
  }
}

export default MyTabs;