javascript - 使用情感设计列表元素

Question

我正在尝试使用 emotion 设计我的 react 应用程序

我想让我的 ul 和 li 元素成为无项目符号。

我正在关注this doc from Emotion 。

这是他们的例子:

import styled from '@emotion/styled'

const Child = styled.div`
  color: red;
`

const Parent = styled.div`
  ${Child} {
    color: green;
  }
`
render(
  <div>
    <Parent>
      <Child>green</Child>
    </Parent>
    <Child>red</Child>
  </div>
)

这是我的尝试。

import React from 'react';
import styled from '@emotion/styled'

class Budget extends React.Component {
    state = {
      studentLoanPayment: 0,
    };

    handleInputChange = event => {
        const { name, value } = event.target;
        console.log(name, value)
        this.setState({ [name]: value });
    };
    const Li = styled.li({
      color: 'red'
    })
    render() {

但是，我在 const li = ... 中收到 li 的 unexpected token 错误如何定位常见 HTML 元素，例如 ul、li、p、label？

Answer 1

您的语法不正确，应该是:

const Li = styled.li`
      color: red;
`