Solution: Styling Nested Components

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 and cardBodyStyle 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 and cardBody 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.