Блог

Главная - Вопросы по программированию - Я хотел бы, чтобы это был элемент click с тегом link в react, но у меня проблемы с css

Я хотел бы, чтобы это был элемент click с тегом link в react, но у меня проблемы с css

#css #reactjs

#css #reactjs

Вопрос:

Я пытаюсь создать веб-сайт на локальном языке, используя React. Это мои коды, я окружил эти два элемента тегом div и применил border css, выглядящий как связанные элементы, но когда я применил тег Link для перехода на другую страницу к элементам div, граница начала не окружать элемент. вкратце, как я могу использовать файл css, который перед применением тега Link?

Вот мой код.

 div{
        border: 1px black solid;
        width: 250px;
        height: 300px;
    }

.p {
        text-align: center;
    }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<Link to='/tests/'>
    <div>
        <i class='fas fa-check fa-5x'></i>
        <p>take tests</p>
    </div>
<Link>

Комментарии:

1. Вы открываете <Link> тег и заканчиваете его на <List> вместо </Link> или, возможно, вы показываете не весь код

2. Спасибо за ваш комментарий, это была ошибка при вводе сообщения.

3. Если вы ставите точку в CSS, вы выбираете класс, а не элемент, вы выбираете подобный элемент <div class="div"></div> в своем CSS

4. Ваш вопрос практически нечитаем. Пожалуйста, исправьте грамматические / языковые проблемы, чтобы мы могли вам помочь.

5. a элементы по умолчанию являются встроенными, попробуйте применить display: block или inline-block . (Хотя использование p элемента для текста, подобного CTA, по-прежнему является плохим выбором, ИМХО. Это все, кроме абзаца текущего текста …)

Ответ №1:

Вы должны добавить класс в div и исправить свой CSS.

 .tests{
        border: 1px black solid;
        width: 250px;
        height: 300px;
    }

.p {
        text-align: center;
    }

jsx 

 <Link to='/tests/' style={{ textDecoration: 'none' }}>
    <div className="tests">
        <i class='fas fa-check fa-5x'></i>
        <p>take tests</p>
    </div>
<Link>

Комментарии:

1. На самом деле не знаю, меняет ли это что-то, мой редактор кода всегда подчеркивает мой код, если я делаю это, но если элемента нет, вы можете сделать это: <i class='fas fa-check fa-5x' /> и закрыть тег сам по себе