风格组件“CSS”没有定义没有民主基金

Question

我有以下Button.js：

import styled from 'styled-components'; 

const Button = styled.button` 

    background: black; 
    border: none; 
    color: white; 
    outline: none; 

    ${props => props.add && css` 
     background: palevioletred; 
     color: white; 
    `}; 

    ${props => props.delete && css` 
     background: palevioletred; 
     color: white; 
    `}; 

`; 

export default Button; 

但是当我运行它，我编译过程中出现以下错误：

./src /components/Button.js第10行：“样式表”没有定义无为undef 第15行：“样式表”没有定义无为undef

我然后使用这样的按钮：

<Button delete>Delete</Button> 
<Button add>Add</Button> 

任何我在这里做错了吗？

Answer 1

终于“想通了”的打算：

import styled from 'styled-components'; 

const Button = styled.button` 

    background: black; 
    border: none; 
    color: white; 
    outline: none; 

    ${(props) => { 
     if (props.add) { 
      return 'background: green;' 
     } else if (props.delete) { 
      return 'background: red;' 
     } else { 
      return 'background: black;' 
     } 
    }} 

`; 

export default Button; 

其工作......即使在我的问题上面我也跟着文档准确。

Answer 2

你试过导入css吗？

import styled, { css } from 'styled-components' 

所以你的代码应该是

import styled, { css } from 'styled-components'; 

const Button = styled.button` 

    background: black; 
    border: none; 
    color: white; 
    outline: none; 

    ${props => props.add && css` 
     background: palevioletred; 
     color: white; 
    `}; 

    ${props => props.delete && css` 
     background: palevioletred; 
     color: white; 
    `}; 

`; 

export default Button;