diff --git a/src/Plock.js b/src/Plock.js
index 22a53e6..f43efce 100644
--- a/src/Plock.js
+++ b/src/Plock.js
@@ -2,7 +2,7 @@ import * as React from "react";
 
 const uuid = () => Math.random().toString(36).substring(2, 12);
 
-export function Plock({ children, className, styles, nColumns = 3, gap = 10 }) {
+export function Plock({ children, className, style, nColumns = 3, gap = 10 }) {
   const [columns, setColumns] = React.useState(() => {
     return Array.from({ length: nColumns }, (e) => []);
   });
@@ -40,7 +40,7 @@ export function Plock({ children, className, styles, nColumns = 3, gap = 10 }) {
     <div
       data-testid="plock-container"
       className={className}
-      style={{ styles, ...defaultStyles.mainGrid }}
+      style={{ style, ...defaultStyles.mainGrid }}
     >
       {columns.map((column, index) => {
         return (
diff --git a/src/Plock.test.js b/src/Plock.test.js
index 93d31a6..664feb9 100644
--- a/src/Plock.test.js
+++ b/src/Plock.test.js
@@ -105,7 +105,7 @@ it("should be possible to customize the styles of the main container using style
 });
 
 it("should not override the default styles", () => {
-  render(<Plock styles={{ display: "flex" }} />);
+  render(<Plock style={{ display: "flex" }} />);
 
   const element = screen.getByTestId("plock-container");
   expect(element).toHaveStyle({ display: "grid" });