Basi c React Styled Component, prop ложно, но должно быть верно

Question

Я строю свой первый проект на стороне React, и я застрял. Я не могу заставить bgColor работать должным образом.

Компонент Square (я создаю сетку)

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

const Sqr = styled.div`
    border: 1px solid gray;
    background-color: ${props => props.bgColor || "red"};
    box-sizing: border-box;
`;

// BG COLOR DOESNT WORK



const square = (props) => {
    console.log("[square] props", props)
    return (
        <Sqr>{props.num}</Sqr>
    )
};

export default square;

И это основной компонент, где я рендерим его:

import React from 'react';
import { connect } from 'react-redux';
import styles from './appname.module.css'
import Board from './Board/Board';
import * as actions from '../../store/actions'
import Square from './Square/Square';
import BoardControls from './BoardControls/BoardControls';

class appname extends React.Component {
    constructor(props){
        super(props);
        this.props.initSquares();
    }
    render() {
        return(
            <div className={styles.appname}>
                <BoardControls />
                <Board size={this.props.settings.size}>
                    {this.props.squares.map(sqr => <Square key={sqr} num={sqr} bgColor={this.props.settings.bgColor} />)}
                </Board>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        settings: state.appname.settings,
        squares: state.appname.squares
    }
}

const mapDispatchToProps = dispatch => {
    return {
        initSquares: () => dispatch(actions.initSquares())
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(appname);

Цвет фона красный в браузере, и если я изменю эту строку на чтение ...

const Sqr = styled.div`
    border: 1px solid gray;
    background-color: ${props => props.bgColor};
    box-sizing: border-box;
`;

... свойство цвета фона исчезнет из класса в инструменты браузера.

Файл console.log читает [square] props {num: 0, bgColor: "#ccc"}..., поэтому он передается.

Что я делаю не так, пожалуйста?

Answer 1

const square = (props) => {
    console.log("[square] props", props)
    const squareStyle= {
      border: '1px solid gray',
      background-color: props.bgColor,
      box-sizing: 'border-box',
    };
    return (
        <Sqr style={squareStyle}>{props.num}</Sqr>
    )
};

Answer 2

Поместите Sqr внутрь компонента

const square = (props) => {
    const Sqr = styled.div`
        border: 1px solid gray;
        background-color: ${props => props.bgColor || "red"};
        box-sizing: border-box;
    `;
    return (
        <Sqr>{props.num}</Sqr>
    )
};