v8.0.15
When you specify two class styles for a style.classes prop, how is precedence determined?
I have two classes that i’ve specified, however both classes have a background fill defined that are difference. I want to use one of them, however I’ve tried changing the order of the classes but I’m only getting the background colour of the other class.
I want the background colour from DeviceStates/Faulted, but am getting the one from Buttons/Body
The manual’s correct. The background is that both classes are applied directly to the component, which means they have equal precedence in terms of CSS selectors - so the defined fallback behavior in the CSS spec is to apply them in the order they’re in in the stylesheet. Style classes all end up on a single ‘virtual’ stylesheet that’s generated when you start up a Perspective session, and that generation happens in alphabetical order.
Would it be feasible to change it to order they’re entered in the classes property? Alphabetical imo makes no sense…
Nope. It’s a part of the CSS specification. Class selectors all operate at the same precedence.
Without rearchitecting how style classes work (to support inheritance in style classes, for instance), the best we could do is manually define the order they’re loaded in, but it would still be ‘global’ across the entire Perspective session, not per element.
Am I correct in saying that style class inheritance is currently not implemented? I can’t seem to find anything about how to do that.
Perspective Style Class inheritance within a View is not something that exists, but if you’re inquiring about CSS inheritance, that is handled through the theme files for the Gateway. These were very basic before 8.0.13, but in 8.0.13 we fleshed them out greatly. Inheritance exists within that file hierarchy as defined within the individual .css files themselves and can be modified as you see fit should you be so inclined as to customize themes on your Gateway.
Read up on theming on our blog.
Thanks, I figured CSS would be the recommended route in this case. Inheritable style classes in the Designer would be nice for small tweaks though.
Maybe in the future, but the current implementation applies Perspective Style Classes in alphabetical order - which prevents precedence/inheritance due to the inability to determine application order.
Any chance inheritance is on the roadmap for the future? Or is there any news on this front?
I am just learning Perspective but have a CSS background, and I feel like I’m running into barriers to using many of the normal techniques within CSS to select elements to be styled.
For example, in CSS, we could nest selectors to style components/elements without having to apply the class to the actual element in Perspective. e.g.
div.flex-values label {text-align: right}
would right-align any label within the containing .flex-values div/flexbox. This is oversimplifying, but I’m trying to find a way to style child elements by styling their parent containers.
You want to make use of theming. There are different scopes available for styling in Perspective, and while in-line styling and style classes are applied only to specific components, theming allows for applying rules to every component in the project/Gateway as long as the given theme file is in use.
The theme files will absolutely allow for specifying the nested selector, but it comes with a heavy warning: there is every possibility that we have ourselves placed components in such a way that your rules could introduce issues and support will probably NOT be able to assist you.
See this blog post.
