样式化组件未应用于该组件

Question

这是我的组件，它没有应用样式。 就我而言，该组件的背景。

import React from 'react';
import styled from 'styled-components'

const TappableButton = (props) => {
  return(
  <div>
    <Button>{props.title}</Button>
  </div>)
}

const Button = styled.button`
  background: "red";
`;

export default TappableButton;

Answer 1

我明白了..问题出在引号上，它没有引号，而只是将“红色”更新为红色。

Answer 2

更改

const Button = styled.button`
  background: "red";
`;

至

const Button = styled.button`
  background: red;
`;

您不需要在该文本周围加上引号。 演示