如何使用 material UI 和样式组件将 link 文本更改为粗体且无下划线？

Question

我有一个导航栏组件，现在或多或少按照我想要的方式设置了样式。但是，在路由的某些按钮上，它们看起来像 link 文本 (blue/purple/underlined)，我不知道如何更改它。还在学习 reac

我使用 Wrapper 在 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);

我已经更改了组件的样式，但它仍然是默认的 link 主题。

Answer 1

而不是

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

尝试传入 Link 组件而不是 css class 的名称。

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

如何使用 material UI 和样式组件将 link 文本更改为粗体且无下划线？

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

reactjs

material-ui

styled-components