Pass style description to child component - css

Question

How do I define a style in a parent component and then pass it to a child component e.g.?
<style>
.teststyle {
background-color: red;
width: 100px;
}
</style>
I thought if I did not use scoped the .teststyle would be available to the child, but it didn't work for me.
I can pass the style to use in a v-bind:style command using props cannot find a way to pass (or make available) for use with v-bind:class.
The child component is for re-use by many parent components each parent component with different style/class attributes each with different properties.
In one example the child component is a generic table and it needs things like column widths, cell colors etc.
In another instance the child component is a grid css layout and that needs no, columns, column layout etc.

Answer 1

What I normally do is I try to design the component as simply and cleanly as possible:
Give the root element a sensible class name (e.g. flyout).
Give child elements class names that use the root element's class name as a prefix (e.g. flyout-title, flyout-content, etc). Sometimes I'll abbreviate the root element's class name if it is long (as fly- or whatever).
<div class="flyout">
<div class="flyout-title">{{ title }}</div>
<div class="flyout-content"><slot/></div>
</div>
This is just my own class naming convention, but you can use whatever as long as it's consistent and unlikely to clash with other class names app-wide.
Now, when you use <flyout> as a child component and you want to style it with CSS, you give it a class name specific to the parent component. For example, if your parent component is app-menu then give the flyout the class name app-menu-flyout. Notice that this convention is the same as the aforementioned; always try to be consistent.
<flyout class="app-menu-flyout"/>
In your <style> section of the parent component, you can declare styles for the child component as follows:
.flyout.app-menu-flyout {
/* Root element */
}
.flyout.app-menu-flyout .flyout-content {
/* Child element */
}
I'm using selectors like this so that they are more specific and will override any styles defined on the child component itself. It'll also work regardless of the order in which the CSS ends up being (order may not be guaranteed by Webpack).
Note that this makes the parent and child components tightly coupled regarding the structure of the child component's template and the class names used. If you change the child component's template and/or class names, then you need to change the corresponding CSS in every other component that declares overriding styles for that component.
If you are using scoped CSS, then pay attention to how child components should be styled.