Styled Component in React: TypeError: Cannot read property 'color' of undefined

Question

I'm using styled components in React, and feel like I have cut & paste this code from another component that is working fine. However, I get this error:

TypeError: Cannot read property 'white' of undefined

If I put in just a color, it works fine. But if I try to use my theme, I get that error.

This is my component:(the white and orange give the same error)

import React, {Component} from 'react';
import {Button, Row, ThemeProvider} from 'react-bootstrap';
import styled from 'styled-components';
import theme from "../../Config/Theme";

const Div = styled.div `
    height: 100vh;
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;

`

const StyledButton = styled(Button) `
    margin: 0.25em;
    width: 10em;
    height: 7em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: ${props => props.theme.colors.white};
    &:hover{
        color: ${props => props.theme.colors.orange};
    }

    div{
        margin-top: 1em;
        font-size: .75em;
    }
    

`

class Tools extends Component {


    render(){
        return(
            <ThemeProvider theme={theme}>
                <Div>
                    <StyledButton>
                        <i class="fal fa-server fa-2x"></i>
                        <div>Client Database</div>
                    </StyledButton>
                    <StyledButton href="/handbook">
                        <i class="fal fa-book fa-2x"></i>
                        <div>Handbook Creator</div>
                    </StyledButton>
                </Div>
            </ThemeProvider>
            
        )
    }
}

export default Tools;

And then this is my theme:

export default {
    colors: {
        orange: "#ffa600",
        light_blue: "#009fc4",
        medium_blue: "#07485c",
        dark_blue: "#14141e",
        bg_trans: "rgba(255, 255, 255, 0.8)",
        bg_gray: "f4f4f4",
        black: "#000",
        white: "#fff"
    },
    sizes: {
        tiny_phone: "414px;",
        portrait_phone: "575.98px",
        landscape_phone: "768.89px;",
        tablet: "991.98px",
        desktop: "1199.98px"
    }

}

Can anyone see what I am missing? It looks the same to me as others that are working... so I'm obviously just not seeing something simple. Thanks in advance for the help.

Answer 1

And of course I figured it out immediately after posting. My mistake was importing ThemeProvider as part of bootstrap rather than styled-components.

So, this:

import React, {Component} from 'react';
import {Button, ThemeProvider} from 'react-bootstrap';
import styled from 'styled-components';
import theme from "../../Config/Theme";

Needed to be this:

import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
import styled, {ThemeProvider} from 'styled-components';
import theme from "../../Config/Theme";

Doh!