4. Styling Your Component

4.1. Add stylesheet

To add a stylesheet we simply import the css file:

import './App.css';

4.2. Exercise

Style the component so that the dot on each item is removed and the question is underlined.

Solution

App.css

1.faq-item {
2  list-style-type: none;
3}
4
5.question {
6  text-decoration: underline;
7}

App.js

 1import React, { Component } from "react";
 2import "./App.css";
 3
 4class App extends Component {
 5  render() {
 6    return (
 7      <ul>
 8        <li className="faq-item">
 9          <h2 className="question">What does the Plone Foundation do?</h2>
10          <p>
11            The mission of the Plone Foundation is to protect and promote Plone.
12            The Foundation provides marketing assistance, awareness, and
13            evangelism assistance to the Plone community. The Foundation also
14            assists with development funding and coordination of funding for
15            large feature implementations. In this way, our role is similar to
16            the role of the Apache Software Foundation and its relationship with
17            the Apache Project.
18          </p>
19        </li>
20        <li className="faq-item">
21          <h2 className="question">Why does Plone need a Foundation?</h2>
22          <p>
23            Plone has reached critical mass, with enterprise implementations and
24            worldwide usage. The Foundation is able to speak for Plone, and
25            provide strong and consistent advocacy for both the project and the
26            community. The Plone Foundation also helps ensure a level playing
27            field, to preserve what is good about Plone as new participants
28            arrive.
29          </p>
30        </li>
31      </ul>
32    );
33  }
34}
35
36export default App;
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,12 @@
import React, { Component } from "react";
+import "./App.css";

class App extends Component {
  render() {
    return (
      <ul>
-        <li>
-          <h2>What does the Plone Foundation do?</h2>
+        <li className="faq-item">
+          <h2 className="question">What does the Plone Foundation do?</h2>
          <p>
            The mission of the Plone Foundation is to protect and promote Plone.
            The Foundation provides marketing assistance, awareness, and
@@ -16,8 +17,8 @@ class App extends Component {
            the Apache Project.
          </p>
        </li>
-        <li>
-          <h2>Why does Plone need a Foundation?</h2>
+        <li className="faq-item">
+          <h2 className="question">Why does Plone need a Foundation?</h2>
          <p>
              Plone has reached critical mass, with enterprise implementations and
            worldwide usage. The Foundation is able to speak for Plone, and