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
You need to import
css
from thestyled-components
package, so the import will look like this:Why are you using CSS?
you can just remove it and it will work.