diff --git a/components/templates/styleguide/index.tsx b/components/templates/styleguide/index.tsx
index ba1198dd..e2524f57 100644
--- a/components/templates/styleguide/index.tsx
+++ b/components/templates/styleguide/index.tsx
@@ -9,6 +9,7 @@ const Styleguide = () => {
       <FooBar />
       <FooBarTag4 />
       <Styled.Title>Styleguide</Styled.Title>
+      <div css={Styled.prop}>This is css prop</div>
       <Styled.Tag1>Cool Styles</Styled.Tag1>
       <Styled.Tag2>
         With <code>:hover</code>.
diff --git a/components/templates/styleguide/styled.ts b/components/templates/styleguide/styled.ts
index eb41c3ee..154bdebb 100644
--- a/components/templates/styleguide/styled.ts
+++ b/components/templates/styleguide/styled.ts
@@ -28,6 +28,11 @@ const hover = css`
   }
 `
 
+export const prop = css`
+  font-size: 200%;
+  color: indigo;
+`
+
 export const bounce = keyframes`
   from {
     transform: scale(1.01);
diff --git a/pages/_app.tsx b/pages/_app.tsx
index d8f45a55..fa37e6b0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,3 @@
-// To solve the issue: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
-/// <reference types="styled-components/cssprop" />
-
 import { AppProps } from 'next/app'
 import Router from 'next/router'
 import { ThemeProvider, DefaultTheme } from 'styled-components'
diff --git a/types/cssprop.d.ts b/types/cssprop.d.ts
new file mode 100644
index 00000000..3b5b8cb0
--- /dev/null
+++ b/types/cssprop.d.ts
@@ -0,0 +1,9 @@
+// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
+// https://github.com/styled-components/styled-components/issues/2528#issuecomment-509780963
+import { CSSProp } from 'styled-components'
+
+declare module 'react' {
+  interface HTMLAttributes<T> extends DOMAttributes<T> {
+    css?: CSSProp
+  }
+}