Course: "Learn React", Section: "Styling in React", Exercise Number: "Styled Components"

[tdraper-dev]

It's quite likely I'm just missing something, and if so apologies, but I noticed the sample solution does not work in the sandbox when directly copy and pasted, even after installing the necessary dependencies. Note: I may have missed a backtick below bc of Markdown interfering with JS syntax, but this is a copy paste reproduction of the code on the Academy page .

1. I needed to add an additional import statement import css from '@emotion/react in order for the sandbox to recognize the css value
2. I had to rewrite the following statement:
   ${(props) => props.hint &&
   css`
   background: #9ae6b4; `}
   as it was throwing a error (0, _react2.deftault) is not a function error to:

background: ${props => props.hint ? "#9ae6b4" : ""};

Copied Code:

import React from 'react';
import styled from '@emotion/styled';

export const Board = styled.div`
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
width: 600px;
height: 600px;
box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.1);
box-sizing: border-box;
`;

export const Square = styled.div`
width: 200px;
height: 200px;
border: 1px solid black;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-size: 6em;
//added for fix:
//background: ${props => props.hint ? "#9ae6b4" : ""};

:hover {
cursor: pointer;
background: #bbdefb !important;
}

${(props) =>
props.hint && css background: #9ae6b4;
\}
`;

function App() {
return (
...
);
}

export default App;