Как изменить текст ссылки на жирный и не подчеркнутый, используя пользовательский интерфейс материала и стилизованные компоненты? - PullRequest
Новая
       9

Как изменить текст ссылки на жирный и не подчеркнутый, используя пользовательский интерфейс материала и стилизованные компоненты?

0 голосов
/ 16 мая 2019

У меня есть компонент панели навигации, который теперь более или менее стилизован так, как я хочу. Однако на некоторых кнопках, которые направляются, они выглядят как текст ссылки (синий / фиолетовый / подчеркнутый), и я не могу понять, как его изменить. Все еще учусь реагировать

Я использовал 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);

Я внес изменения в стилизованные компоненты, но он остается темой ссылки по умолчанию.

1 Ответ

0 голосов
/ 16 мая 2019

Вместо выполнения 

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

Попробуйте передать компонент Link вместо имени класса css. 

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