Material-ui: RaisedButton wrapped in Link from react-router have CSS issues

[Antonhansel]

I'm not sure if this should also be posted on react-router.

Using the following toolbar configuration:

        <ToolbarGroup key={1} float="right">
          <ToolbarSeparator/>
        <Link to="/dashboard"><RaisedButton label="Dashboard" primary={true}/></Link>
        <Link to="/clients"><RaisedButton label="Clients" primary={true}/></Link>
        <RaisedButton label="Logout" primary={false} onClick={this.logout}/>
        </ToolbarGroup>

As you can see, when wrapped into Link from react-router the CSS is wrong.

Should I wrap it another way?

Thank you for your great work on this awesome library.

[alitaheri]

ToolbarGroup passed style down to it's children. but since it's immediate child is Link the RaisedBottom is not receiving the props. can you use something else and try again?

[kai23]

I have the same issue. Did you find any trick to bypass it ?

[mbrookes]

It looks like ReactRouter Link consumes the style prop: https://github.com/rackt/react-router/blob/master/modules/Link.js#L69

[kai23]

Hmm… that's annoying. Don't we have any way to make it more "important" ? Or can we add default material-ui styles to Link ?

[salfej]

Try:

<RaisedButton linkbutton containerElement={<Link to="/dashboard" />} label="Dashboard" primary={true}/> <RaisedButton linkbutton containerElement={<Link to="/clients" />} label="Clients" primary={true}/>

The containerElement seems to do the trick of keeping alignment and changing states.

[mbrookes]

Thanks @salfej We need to document that.

850

[tintin1343]

@mbrookes : I guess this can be closed now.

[nomadtechie]

@mbrookes is there any way we can add the containerElement to the ToolbarTitle component as well? It's fairly easy to make your own title with the material styling however, it would be more consistent to add it into the library. Thoughts? I can create a new issue if you agree.

[WillowHQ]

ok ... sorry but I can't get this to work ?

[brettwise]

The trick here seems to be using the containerElement property on your button @WillowHQ. Seems to resolve the CSS issue I was seeing on the <FlatButton /> component I was using.

@salfej tip seems to be working.

[d3vild06]

I know this issue has been closed by I am also facing similar issues using the <RaisedButton /> component with react-router's <Link /> to. My button is no longer aligned with the <AppBar />'s Title. See screenshot below:

This is my code:

const LogIn = () => (
    <RaisedButton containerElement={<Link to="/login" />} label="login" primary={true} />
)


export class TopNav extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const isLoggedIn = this.props.isLoggedIn;
    return (
      <div>
        <AppBar
          title="FitFights"
          iconElementRight={isLoggedIn ? <LoggedIn /> : <LogIn />}
          showMenuIconButton={false}
        />
      </div>
    )
  }
}

Any ideas?