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
2
3
4
5
6
7
.faq-item {
  list-style-type: none;
}

.question {
  text-decoration: underline;
}

App.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <ul>
        <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
            evangelism assistance to the Plone community. The Foundation also
            assists with development funding and coordination of funding for
            large feature implementations. In this way, our role is similar to
            the role of the Apache Software Foundation and its relationship with
            the Apache Project.
          </p>
        </li>
        <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
            provide strong and consistent advocacy for both the project and the
            community. The Plone Foundation also helps ensure a level playing
            field, to preserve what is good about Plone as new participants
            arrive.
          </p>
        </li>
      </ul>
    );
  }
}

export 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