Next.jsのApp Routerにおいて、layout.tsx内でデザインを定義し、グローバルに適用する方法

実現したいこと

layout.tsxファイル内において、背景コンポーネントを定義し、グローバルに適用したいです

発生している問題・分からないこと

import styled from 'styled-components';
import React from 'react'; // Reactをインポート

const Container = styled.div background-image: linear-gradient(to left, #8f94fd, #4e54c8); width: 100vw; height: 100vh;;

interface LayoutProps {
children: React.ReactNode;
}

export default function Layout({ children }: LayoutProps) {
return <Container>{children}</Container>;
}
上記の様にlayout.tsxを書き換え、「npm run dev」を実行した所、

const Container = styled.div background-image: linear-gradient(to left, #8f94fd, #4e54c8); width: 100vw; height: 100vh;;
という様に定義したスタイルが背景として設定されず、白い背景のままでした。
どの様にすれば、正しく背景が設定されるのでしょうか？

該当のソースコード

TypeScript

1import styled from 'styled-components';2import React from 'react'; // Reactをインポート3 4const Container = styled.div`5 background-image: linear-gradient(to left, #8f94fd, #4e54c8);6 width: 100vw;7 height: 100vh;8`;9 10interface LayoutProps {11 children: React.ReactNode;12}13 14export default function Layout({ children }: LayoutProps) {15 return <Container>{children}</Container>;16}

試したこと・調べたこと

上記の詳細・結果

背景は真っ白となり、作成した動く背景は反映されなかった

補足

特になし