如何自定义oj-button按钮颜色？内联样式设置无效求助

Hey there! I’ve dealt with this exact problem when styling Oracle JET components before—inline styles often don’t work on oj-button because the component’s built-in CSS has higher specificity, and the actual button visual is rendered in a nested child element. Let’s go over some simple, effective ways to customize its color:

Why Your Inline Style Isn’t Working #

Oracle JET’s oj-button wraps the clickable area in a child element (like <span class="oj-button-button">), and the component’s default styles target this inner element directly. Your inline style on the parent oj-button tag gets ignored because it doesn’t apply to the element that actually controls the background.

Recommended Fix: Custom CSS Class #

This is the cleanest, most maintainable approach. Create a custom class that targets the button’s inner styling element:

1. Add this CSS to your stylesheet:

.custom-purple-button .oj-button-button {
  background-color: #670067;
  border-color: #670067; /* Match border to background if needed */
  color: white; /* Ensure text is readable against the dark purple */
  /* Optional: Add hover/active state styles */
}

.custom-purple-button .oj-button-button:hover {
  background-color: #8a008a; /* Darker shade for hover */
}

2. Update your HTML to use the class:

<div id='buttons-container'> 
  <oj-button id='in' class="custom-purple-button">My Button</oj-button> 
</div>

Alternative: Use Oracle JET CSS Variables #

Oracle JET provides built-in CSS variables that let you style components without targeting inner elements directly. This preserves the component’s native state styles (hover, active, etc.) automatically:

.custom-purple-button {
  --oj-core-button-primary-background-color: #670067;
  --oj-core-button-primary-border-color: #670067;
  --oj-core-button-primary-text-color: white;
  /* Optional: Customize hover state */
  --oj-core-button-primary-hover-background-color: #8a008a;
}

Then apply the class to your button just like above—this will update all relevant button states consistently.

Quick (But Less Ideal) Fix: !important #

If you need a fast, temporary solution, you can force the style with !important. Note that this can cause conflicts with other styles later, so use it sparingly:

<div id='buttons-container'> 
  <oj-button id='in' style="background-color: #670067 !important; border-color: #670067 !important; color: white !important;">My Button</oj-button> 
</div>

内容的提问来源于stack exchange，提问作者Elva