javascript - 使用情感样式列表元素

Question

我正在尝试react使用emotion

我想让我的ul和li元素不受子弹的影响。

我正在关注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() {

但是，我在 如何定位常见的 HTML 元素（unexpected token如, , , ?liconst li = ...ulliplabel

标签： javascripthtmlreactjsemotion

Answer 1

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

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