How to ignore Material UI theme styling for component?

Question

My button component (that is also a material UI component) already has the style I want, but when I surround it with the Link component, which is a react-dom-router component, it overrides the style of my button. How to ignore the default style of Link?

<AppBar>
   <Toolbar>
      <Link to="/some-link">
          <Button>
              My Button
          </Button>
       </Link>
   </Toolbar>
</AppBar>

Answer 1

Nesting a Link (<a>) inside a Button (<button>), and viceversa, is not valid HTML. I would recommend you either remove the Button or you use react-router and add props.history.push("/some-link") to your Button onClick handler. Like this:

<Button onClick={() => history.push("/some-link")}>My Button</Button>

Take a look at this sandbox I made. Let me know if it helps.

Answer 2

Instead of nesting a button inside a Link (which is weird because they are both clickable elements) just use the Button with an onClick handler where you can manually trigger the route change.

See also React-router: How to manually invoke Link?

Answer 3

Here's the example given on the material ui site. You probably don't need the router part though.

https://material-ui.com/components/buttons/#ButtonRouter.js

import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { Link } from 'react-router-dom';
import Button from '@material-ui/core/Button';

// The usage of React.forwardRef will no longer be required for react-router-dom v6.
// see https://github.com/ReactTraining/react-router/issues/6056
const AdapterLink = React.forwardRef((props, ref) => <Link innerRef={ref} {...props} />);

const CollisionLink = React.forwardRef((props, ref) => (
  <Link innerRef={ref} to="/getting-started/installation/" {...props} />
));

export default function ButtonRouter() {
  return (
    <Router>
      <Button color="primary" component={AdapterLink} to="/">
        Simple case
      </Button>
      <Button component={CollisionLink}>Avoids props collision</Button>
    </Router>
  );
}