为什么我的样式组件不适用于文本装饰？

Question

我正在尝试使用 styled-components 删除我的链接的下划线 如果我使用 style={{textDecoration: "none"}} 它将起作用，但是当我在我的样式组件中使用 text-decoration: none; 时它将不起作用： 这是我的js代码：

import React from "react";
import styled from "styled-components";
import { Link } from "@reach/router";
import { CSSTransition, TransitionGroup } from "react-transition-group";

const StyleNavbarContainer = styled.nav`
  background-color: #333333;
  width: 100%;
  color: #d6d6d6;
  position: fixed;
  text-align: center;
  top: 0;
`;

const AppleLogo = styled.div`
  font-size: 20px;
  display: inline-block;
`;

const StyleLinkList = styled.ul`
  display: inline-block;
`;

const StyledLink = styled(Link)`
  padding: 12px 10px;
  color: #d6d6d6;
  text-decoration: none;
`;

const Navbar = (props) => {
  return (
    <>
      <StyleNavbarContainer>
        <AppleLogo>
          <i class="fab fa-apple"></i>
        </AppleLogo>
        <StyleLinkList>
          <StyledLink to="/">Mac</StyledLink>
        </StyleLinkList>
      </StyleNavbarContainer>
    </>
  );
};

export default Navbar;

在此处添加我的 App.jsx 文件是代码：

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/Navbar";

    function App() {
      return (
        <div className="App">
          <Navbar />
        </div>
      );
    }
    
    export default App;

Answer 1

需要从 App.jsx 中删除 import "bootstrap/dist/css/bootstrap.min.css";