Solution: Styling Nested Components
Get to know the solution of how to style nested components using the CSS modules.
We'll cover the following
Solution
Your task was to modify App
and Card
components to pass styles from the App
component and compose them in the Card
component with already existing styles. Here are the required changes:
src/components/Card.vue
- Add
cardStyle
,cardHeaderStyle
andcardBodyStyle
props. - Modify the classes of
Card
elements to accept a dynamic class consisting of an array that contains the default style and passed prop styles as items. E.g.,:class=”[$style.card, cardStyle]”
.
src/App.vue
- Create
card
,cardHeader
andcardBody
styles. - Pass the styles as props to the
Card
component.
Let’s run the following code to understand how the above solution works.
Note: The code below may take a while to run. When the server starts, go to the app URL, and see the output.
Get hands-on with 1200+ tech skills courses.