Оформление текста: нет! Важно не работает

Question

Что бы я ни делал, я не могу удалить подчеркивание. У меня выбран правильный элемент, так как я могу изменить любой другой стиль CSS, но подчеркивание остается каждый раз. Я просмотрел все остальные вопросы, касающиеся этого, и ни один метод не работает. Даже если я go использую инструменты chrome dev, вручную установите значение text-художественное оформление элемента равным none.

Снимок экрана, код компонента React и код css ниже. Ссылка на github: https://github.com/andrewtyl/www.ajessen.com/

Снимок экрана проблемы

Реагирующий компонент

import React from 'react'
import '../styles//App.css';
import '../styles/normalize.css';
import { Link } from 'react-router-dom';

class Header extends React.Component {
    render() {
        return (
            <header>
                <Link to="/">
                    <div id="ajessen-logo">
                        <img src={require('../assets/logo-raw.png')} alt="Ajessen Logo" />
                    </div>
                </Link>
                <nav>
                    <ul>
                        <Link to="/">
                            <li>Home</li>
                        </Link>
                        <Link to="/services">
                            <li>Services and Skills</li>
                        </Link>
                        <Link to="/projects">
                            <li>Projects</li>
                        </Link>
                        <Link to="/about">
                            <li>About Me</li>
                        </Link>
                        <Link to="/contact">
                            <li>Contact Me</li>
                        </Link>
                    </ul>
                </nav>
            </header>
        )
    }
}

export default Header

приложение. css

/*
FONTS
Titles: Baloo Tamma 2
Subtitles/Large Text: DM Serif Text
Basic Text: Times New Roman
*/

@import url('https://fonts.googleapis.com/css?family=Baloo+Tamma+2|DM+Serif+Text&display=swap');

html {
    font-family: 'Times New Roman', Times, serif;
}

h1 {
    font-family: 'Baloo Tamma 2', cursive;
}

h2 {
    font-family: 'DM Serif Text', cursive;
}

footer {
    text-align: center;
    margin-bottom: 10px;
    margin-top: auto;
    bottom: 10px;
    left: auto;
    right: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 100%;

}

header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    /*border-bottom: black solid 1px;*/
}

header > nav > ul > a > li {
    text-decoration: none !important;
    color: black;
}

header > nav {
    width: 60%;
    margin-bottom: 0px;
    margin-top: auto;
    display: flex;
}

header > nav > ul {
    margin-bottom: 0px;
}

header > a {
    width: 40%;
    min-height: 125px;
    margin-bottom: 0px;
}

header > nav > ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: flex-end;
    width: 100%
}

#ajessen-logo {
    width: 100%;
    height: auto;
    padding-top: 5%;
    padding-left: 2.5%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: auto;
}

#ajessen-logo > img {
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: auto;
}

#github-footer-icon {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 25%;
}

Answer 1

Две вещи, во-первых, вам нужно изменить импорт файла приложения. css с

import "./styles//App.css";

на

import "./styles/App.css";

и желаемое свойство CSS использовать text-decoration, а не text-decoration-style, и вы хотите применить его к anchor нет list item

 header > nav > ul > a {
  text-decoration: none !important;
 }

добавление этого CSS в конце файла App.css исправляет ваши выпуск