PrimeFaces переопределяет мой собственный стиль CSS

Question

Я пытаюсь создать PrimeFaces commandButtons разных цветов. В моей таблице стилей у меня есть что-то вроде этого:

.styleGreen {  
    background-color: #009900; 
    font-family: Arial,Helvetica,sans-serif; 
} 

и компонент, как это:

<p:commandButton value="Green Button" styleClass="styleGreen" ... 

Это работает, когда CommandButton является не внутри PrimeFaces панель или какой-либо другой контейнер , Но когда я перемещаю его в тело моей страницы, все пользовательские правила CSS переопределяются.

Каков правильный способ его устранения?

Answer 1

Простого решения для вас, ребят:

Если у вас есть CommandButton в панели (или форма), как, что:

<h:form .... > 
    <p:commandButton value="Green Button" styleClass="styleGreen" ... /> 
</h:form> 

Вы просто определить ваш CSS как это:

form .styleGreen {  
    background-color: #009900; 
    font-family: Arial,Helvetica,sans-serif; 
} 

Это будет работать очень хорошо (я только что пробовал)

Answer 2

Это значение унаследуют может работать:

.styleGreen {  
    background-color: #009900 !important; 
    font-family: Arial,Helvetica,sans-serif !important; 
} 

Answer 3

В то время как важно, возможно, сделать это вы, вероятно, следует переопределить файлы ThemeBuilder CSS. Просмотрите руководство по интерфейсам в разделе «Как использовать пользовательскую таблицу стилей». Поверхности в основном построены на jQueryUI http://jqueryui.com/, поэтому переопределите его. (Кроме того, вы можете просто качать специальную тему, которая часто является лучшим выбором).

Просто найдите время, чтобы посмотреть на него, и если вам действительно нужен пользовательский компонент, вы можете построить стандартную библиотеку и настроить ее. Поскольку вы имеете дело с jQuery для начала, это простое обновление.

В ответ

Я думаю, что лучший маршрут может быть просто использовать стандартную кнопку и сделать составной компонент. Это полностью зависит от того, как часто вы его используете, насколько важно это для сайта и что вам нужно делать. В основном jQueryUI будет отображать кнопку и интервал, но из-за того, как сгруппированы перфорированные элементы, вы будете применять стили к OUTSIDE, поэтому внутреннее правило не будет применяться.

Таким образом, я хотел бы сделать пользовательский компонент вдоль линий ->

<h:commandButton styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" style="${myOverridesHere}"> 
    <p:ajax event="click" ... etc... read the manual/> 
</h:commandButton> 

Конечного результата является то, что вы добавляете «Аякс» в CommandButton через API Primefaces (который живет наверх стандартного API JSF2. У меня не было необходимости специально проверять это на данный момент, но я уверен, что некоторые варианты этого будут делать то, что вам нужно, не заставляя важный каскад, который обычно является плохой практикой.) Для записи , вам нужны стили jQueryUI на странице, чтобы это работало (очевидно).

Надеется, что это помогает