title: Style list elements using emotion
body: <p>I'm trying to style my <code>react</code> app using <code>emotion</code></p>
  
  <p>I'd like to make my <code>ul</code> and <code>li</code> elements unbulleted. </p>
  
  <p>I'm following <a href="https://emotion.sh/docs/styled" rel="nofollow noreferrer">this doc from Emotion</a>. </p>
  
  <p>This is their example: </p>
  
  <pre><code>import styled from '@emotion/styled'
  
  const Child = styled.div`
    color: red;
  `
  
  const Parent = styled.div`
    ${Child} {
      color: green;
    }
  `
  render(
    &lt;div&gt;
      &lt;Parent&gt;
        &lt;Child&gt;green&lt;/Child&gt;
      &lt;/Parent&gt;
      &lt;Child&gt;red&lt;/Child&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>And this is my attempt.</p>
  
  <pre><code>import React from 'react';
  import styled from '@emotion/styled'
  
  class Budget extends React.Component {
      state = {
        studentLoanPayment: 0,
      };
  
      handleInputChange = event =&gt; {
          const { name, value } = event.target;
          console.log(name, value)
          this.setState({ [name]: value });
      };
      const Li = styled.li({
        color: 'red'
      })
      render() {
  </code></pre>
  
  <p>However I'm getting an <code>unexpected token</code> error for <code>li</code> in <code>const li = ...</code>
  How do I target common HTML elements like <code>ul</code>, <code>li</code>, <code>p</code>, <code>label</code>?</p>