How can I change the link text to be bold and non underlined using material UI and styled components?

Question

I have a navigation bar component that is now more or less styled the way I want it. However, on some buttons that route, they look like link text (blue/purple/underlined) and I can't figure out how to change it. Still learning reac

I used Wrapper to align all in flex

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import HomePage from "../../MainPages/HomePage/HomePage";
import Button from "@material-ui/core/Button";
import styled from "styled-components";
// import Typography from "@material-ui/core/Typography";
import "../NavBar/NavBar.css";
import { createMuiTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';


const theme = createMuiTheme();
console.log(theme);

const Wrapper = styled.ul`
  display: flex;
  margin-left: -40px;
`;

const StyledLink = styled('nav-link')`
  height: 40px;
  font-weight: bold;
`;

class NavBarLogin extends Component {
  logOut(e) {
    e.preventDefault();
    // removes token from browser
    localStorage.removeItem("usertoken");
    this.props.history.push(`/`);
  }

  render() {
    const loginRegLink = (
      <div>
        <Button variant="contained" color="secondary" className="nav-item">
          <Link
            to="/login"
            className="nav-link"
            component="button"
            variant="body2"
          >
            LOGIN
          </Link>
        </Button>
        <Button variant="contained" color="secondary" className="nav-item">
          <Link
            to="/register"
            className="nav-link"
            component="button"
            variant="body2"
          >
            REGISTER
          </Link>
        </Button>
      </div>
    );
    const userLink = (
      <div>
        <Button variant="contained" color="secondary" className="nav-item">
          <Link
            to="/profile"
            className="nav-link"
            component="button"
            variant="body2"
          >
            CLICK TO START
          </Link>
        </Button>
        <Button variant="contained" color="secondary" className="nav-item">
          <a href="" onClick={this.logOut.bind(this)} className="nav-link">
            LOGOUT
          </a>
        </Button>
      </div>
    );

    return (
      <div>
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark rounded">
          <div
            className="collapse navbar-collapse justify-content-md-center"
            id="navbar1"
          >
            <StyledLink>
              <Wrapper className="navbar-nav">
                <Button
                  variant="contained"
                  color="secondary"
                  className="nav-item"
                >
                  <Link to="/" className="nav-link">
                    Home
                  </Link>
                </Button>
                {localStorage.usertoken ? userLink : loginRegLink}
              </Wrapper>
            </StyledLink>
          </div>
        </nav>
        <HomePage />
      </div>
    );
  }
}

export default withRouter(NavBarLogin);

I've made changes in styled components but it remains default link themed.

Answer 1

Instead of doing

const StyledLink = styled('nav-link')`
  height: 40px;
  font-weight: bold;
`;

Try passing in the Link component instead of the name of the css class.

const StyledLink = styled(Link)`
  height: 40px;
  font-weight: bold;
`;