Trouble displaying color background thru props in react App using components

Question

I want to color the background of my divs thru calling props on my components. I have a colors file in js from where I recall values, as it works like an object. I can recall the name of the color, but the background color does not display like I want it to. Here are some files and code of my project.

export default [
  {
    paletteName: "Material UI Colors",
    id: "material-ui-colors",
    emoji: "🎨",
    colors: [
      { name: "red", color: "#F44336" },
      { name: "pink", color: "#E91E63" },
      { name: "purple", color: "#9C27B0" },
      { name: "deeppurple", color: "#673AB7" },
      { name: "indigo", color: "#3F51B5" },
      { name: "blue", color: "#2196F3" },
      { name: "lightblue", color: "#03A9F4" },
      { name: "cyan", color: "#00BCD4" },
      { name: "teal", color: "#009688" },
      { name: "green", color: "#4CAF50" },
      { name: "lightgreen", color: "#8BC34A" },
      { name: "lime", color: "#CDDC39" },
      { name: "yellow", color: "#FFEB3B" },
      { name: "amber", color: "#FFC107" },
      { name: "orange", color: "#FF9800" },
      { name: "deeporange", color: "#FF5722" },
      { name: "brown", color: "#795548" },
      { name: "grey", color: "#9E9E9E" },
      { name: "bluegrey", color: "#607D8B" }
    ]
  }```

My colorBox component

import React, { Component } from 'react';
import "./ColorBox.css";

class ColorBox extends Component {
    render() {
        const { name, background } = this.props;
        return(
            <div stlye={{  background }} className='ColorBox'>
                <div className="copy-container">
                <div className="box-content">
                    <span>{name}</span>
                </div>
                <button className="copy-button">Copy
                </button>
                <span className="see-more">More</span>
                </div>
            </div>
        )
    }
}

export default ColorBox; ```

Here is my Palette Component that renders colorBox component

    import React, { Component } from 'react';
    import ColorBox from "./ColorBox";
    import "./Palette.css";
    
    class Palette extends Component {
        render() {
            const colorBoxes = this.props.colors.map(color => (
                <ColorBox background={color.color} name={color.name} />
            ));
            return (
                <div className="Palette">
                    <div className="Panel-colors">{colorBoxes}
                    </div>
                </div>
            );
        }
    }
    
    export default Palette;

And here is App.js rendering Palette and selecting thru spreadOperator the values on my seed component

import React, { Component } from 'react';
import Palette from "./Palette";
import seedColors from "./seedColors";


class App extends Component {
  render() {
    return (
      <div>
        <Palette {...seedColors[0]} />
      </div>
    );
  }
}

export default App;

Here is a Screenshot of how it runs the react app, it easily extrapolates the names of the colors thru props, but doesn't show the background color, any tips? Thank you.