2015-04-13 4 views
2

Я пытаюсь изменить стиль некоторых семантических компонентов ui. Я создал файл css, и я меняю параметры там. Потом я заметил, что все файлы компонента CSS (в семантической папке UI) имеют следующий код в конце:Semantic UI - изменить стили компонентов (переопределить компоненты css)

/******************************* 
     Theme Overrides 
*******************************/ 


/******************************* 
     Site Overrides 
*******************************/ 

Я копия вставленный код из моего файла CSS в нижнюю части файла CSS компонентного но стили не были обновлены/отменены. Я пытался использовать !important, но это тоже не сработало.

Я пытался что-то вроде этого:

/******************************* 
     Theme Overrides 
*******************************/ 

.ui.header { 
    border: solid red; !important 
    border-width: 2px; !important 
} 

Я ожидал этот элемент, чтобы получить красную рамку вокруг него

<div class="ui small header">This is a header</div> 

Любая идея, почему это не сработало?

+0

Вы используете одни и те же селекторы? Для переопределения стиля по умолчанию вам нужно использовать равную (допустимо, если ваш CSS помещен ** после ** по умолчанию) или более сильные селектор. –

+0

Да, я использую точно такие же селекторы. Я смотрел, и я удалил несколько папок оригинального почтового индекса Semantic UI, потому что чувствовал, что они будут бесполезны. Я уверен, что проблема вызвана из-за недостающей папки (просто гадать, нужно попробовать). –

+0

Если вы удалили что-то необходимое, вы можете посмотреть журналы консоли в своем браузере, они могут сообщать о ** 404 Не найдено **, таким образом вы можете выяснить, какие файлы вам нужны. –

ответ

1

Вы должны добавить свои верховные стили CSS в ЦСИ/сайт/элементы/файл header.overrides и запустить глотком построить команду.

Если «gulp watch» уже запущен, он автоматически запускает задачу сборки при обнаружении изменений в вышеупомянутом файле.

src/site Папка присутствует, чтобы переопределить любой стиль, введенный выбранной темой.

0

Попробуйте включить '! Important' Within ';' в вашем коде, как это,

.ui.header {

границы: твердый красный важный;

border-width: 2px! Important;

}

Смежные вопросы