Изменить стиль при наведении компонентов semantic-ui-react

если я настрою className для определенных компонентов, таких как

<Segment className="Change" color='blue' inverted></Segment>

и в моем css я использую

.Change:hover{
  background-color: black; //or any other change on hover
}

при наведении ничего не переопределяется.

Я также заметил, что есть много других компонентов, которые отказываются от моих изменений, по-видимому, случайным образом. Один семантический компонент позволит мне изменить ширину, другой — нет. Является ли причина из той же проблемы? Как переопределить цвет при наведении?


reactjs css semantic-ui-react semantic-ui
person DORRITO    schedule 17.02.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

После просмотра исходного кода компонента сегмента (github), я обнаружил, что у него есть два класса по умолчанию: segment и ui. Кроме того, вы использовали два реквизита color=blue и inverted. Поэтому я бы рекомендовал использовать следующий код.

.ui.segment.blue.inverted.Change:hover {
  background-color: black !important;
}

Работает DEMO

person fyasir    schedule 17.02.2018
comment
Черт, я пробовал пару вещей, подобных этому, поэтому подумал, что это может сработать, но это не так. Такое простое изменение, которое легко работает с div, заставляет меня думать, что в этом случае мне не следует использовать семантику. - person DORRITO; 17.02.2018
comment
Я отредактировал свой ответ с помощью !important. ты тоже пробовал? - person fyasir; 17.02.2018
comment
Ваша демонстрация помогла! Предостережение: я не могу использовать для этого реактивную версию семантического пользовательского интерфейса. Я могу использовать его для изменения текста, но не для цвета фона. (с простым .Change:hover) Я голосую за ваш результат как за ответ, потому что, хотя он не решает проблему с версией React, и мне приходится использовать обычный семантический код, это обходной путь, который работает! Спасибо. - person DORRITO; 17.02.2018
comment
Я уже использовал !important, да. сработало переключение на ‹div› и от семантического компонента реакции. - person DORRITO; 17.02.2018

arrow_upward
1
arrow_downward

Выберите любой цветовой семантический интерфейс, например:

<Form>
      <Form.Input label="Email" type="email" />
      <Form.Input label="Password" type="password" />
      <Button color="teal" type="submit">
        Sign In
      </Button>
</Form>

Ваша кнопка выглядит так:

введите здесь описание изображения

Вы можете добавить перевернутые реквизиты внутри компонента Button, которые реагируют на семантический интерфейс.

<Form>
      <Form.Input label="Email" type="email" />
      <Form.Input label="Password" type="password" />
      <Button inverted color="teal" type="submit">
        Sign In
      </Button>
</Form>

ваш компонент выглядит так:

введите здесь описание изображения

При наведении возвращается к основному стилю, противоположному инвертированному

использование стилизованных компонентов с реагирующим семантическим пользовательским интерфейсом

Я рекомендовал вам использовать styled-components, чтобы переопределить стиль компонента semantic-ui.

import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";

const Mybutton = styled(Button)`
 &:hover {
    color: #fff !important;
 }
`;

Затем используйте новый стилизованный компонент вместо семантического пользовательского интерфейса.

<Mybutton inverted color="teal" type="submit">
   Sign In
</Mybutton>
person xargr    schedule 31.10.2018

arrow_upward
0
arrow_downward

Поскольку вы не предоставили больше кода, трудно догадаться, какой переопределяющий стиль вы пытаетесь изменить. Попробуйте добавить правило !importanant к этому стилю.

.Change:hover {
  background-color: black !importanant;
}

Чтобы избежать !important, что не всегда является хорошим решением, добавьте более конкретный селектор CSS, например Segment.Change:hover.

ОБНОВЛЕНИЕ: Попробуйте удалить color='blue' из шаблона и проверьте, будет ли он работать с правилом !important и без него.

person mpro    schedule 17.02.2018
comment
Я пробовал важно, не работает, к сожалению. Показанный код — это все, что есть на странице. Остальное будет операторами импорта и реакцией на рендеринг. Просто пытаюсь изменить цвет (или сделать что-нибудь при наведении) стиля «Сегмент» из semantic-ui-react. - person DORRITO; 17.02.2018