skip to Main Content

I typed exactly what came out of the book, but it says css is not defined.
Is it because the content of the react has changed a lot? Or what’s the problem?

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

   const StyledButton = styled.button`
       border: none;
       border-radius: 4px;
       font-size: 1rem;
       font-weight: bold;
       padding: 0.25rem 1rem;
       color: white;
       outline: none;
       cursor: pointer;

       background: #343a40;
       &:hover {
           background: #868e96;
       }

       ${(props) =>
           props.fullwidth &&
           css`
               padding-top: 0.75rem;
               padding-bottom: 0.75rem;
               width: 100%;
               font-size: 1.125rem;
            `}

       ${(props) =>
            props.cyan &&
            css`
                background: #3bc9db;
                &:hover {
                    background: #66d9e8;
                }
            `}
    `;

    const Button = (props) => <StyledButton {...props} />;

    export default Button;
[eslint]
srccomponentscommonbutton.js
  Line 21:9:  'css' is not defined  no-undef
  Line 30:9:  'css' is not defined  no-undef

Search for the keywords to learn more about each error.
ERROR in [eslint]
srccomponentscommonbutton.js
  Line 21:9:  'css' is not defined  no-undef
  Line 30:9:  'css' is not defined  no-undef

Search for the keywords to learn more about each error.

webpack compiled with 1 error

I erased the css letter and looked up the literature, but I couldn’t find the answer.

2

Answers


  1. You need to import css from the styled-components package, so the import will look like this:

    import styled, { css } from "styled-components";
    
    Login or Signup to reply.
  2. Why are you using CSS?

    you can just remove it and it will work.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search