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

//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 🎨

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store