風格組件「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;