Challenge: Styling Nested Components

Problem statement

Components usually should be encapsulated and contain their markup, logic, and styles. However, there are cases where it’s useful to allow a parent component to provide styles and modify the look of a child component. Your task is to create styles and provide them to a child component.

Challenge

You are provided with a project that contains App.vue and Card.vue components. Your task is to define styles in the App component and provide them via props to the Card components. Your styles should have the following effect:

• The card background should change to #171717.
• The colour of the header text should change to #f5f5f5. The colour of the card main text should change to #f5f5f5.

You should use the style tag with the module attribute for this task - <style module>.