CSS中in JS是什么意思

import React from "react";

import styled from "styled-components";

// 创建一个带样式的 h1 标签

const Title = styled.h1`

  font-size: 1.5em;

  text-align: center;

  color: palevioletred;

`;

// 创建一个带样式的 section 标签

const Wrapper = styled.section`

  padding: 4em;

  background: papayawhip;

`;

// 通过属性动态定义样式

const Button = styled.button`

  background: ${props => (props.primary ? "palevioletred" : "white")};

  color: ${props => (props.primary ? "white" : "palevioletred")};

  font-size: 1em;

  margin: 1em;

  padding: 0.25em 1em;

  border: 2px solid palevioletred;

  border-radius: 3px;

`;

// 样式复用

const TomatoButton = styled(Button)`

  color: tomato;

  border-color: tomato;

`;

<Wrapper>

  <Title>Hello World, this is my first styled component!</Title>

  <Button primary>Primary</Button>

</Wrapper>;