Completing the home page styling
In this section, we are going to complete the styling on the home page.
Styling the QuestionList component
Let's go through the following steps to style the QuestionList
component:
- Open
QuestionList.tsx
and add the following lines at the top of the file:/** @jsxImportSource @emotion/react */ import { css } from '@emotion/react;
- Also import the following common styles:
import { accent2, gray5 } from './Styles';
- Style the
ul
element in the JSX as follows:<ul css={css` list-style: none; margin: 10px 0 0 0; padding: 0px 20px; background-color: #fff; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top: 3px solid ${accent2}; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16); `} >...