使用情感样式列表元素

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;
`