Adding custom styles to oj-select-one component in Oracle Jet

Each Oracle Jet component comes with some default styles out of the box, most of which can be changed within the theme settings file. Occasionally however the situation can occur where you need to style a component in a specific way, styles which cannot simply be set in the theme settings file.

Usually, such styling changes could simple be declared in your css/sass file and it would target the component using the generated components classes. This approach, whilst it works, is a little messy and can have issues where by the style set for component A, will also apply to component B. One way to mitigate this is the ability to set a custom class on the generated component.

Setting custom attributes

The component has an attribute called picker-attributes, the docs for which can be found here. The docs outline that through picker attributes both and can be set using the following syntaxt:

//View Model
const pickerAttributes = { "style": "color:blue;", "class": "my-class" };
//View
<oj-select-one picker-attributes="[[pickerAttributes]]"></oj-select-one>

When the component is rendered, it will have the class specified and be available for selection using css/sass.

Co-Founder of Bel 💪🏼 | Product Manager 📄 | Developer 💻 | Product Design 🎨

Co-Founder of Bel 💪🏼 | Product Manager 📄 | Developer 💻 | Product Design 🎨