fixed global style auto formatting issue

This commit is contained in:
Kim, Jimin 2021-08-13 18:59:24 +09:00
parent ecffddf877
commit 159cbc293a

View file

@ -1,6 +1,10 @@
import React from "react" import React from "react"
import { Switch, Route } from "react-router-dom" import { Switch, Route } from "react-router-dom"
import styled, { ThemeProvider, createGlobalStyle } from "styled-components" import styled, {
ThemeProvider,
createGlobalStyle,
css,
} from "styled-components"
import { HelmetProvider, Helmet } from "react-helmet-async" import { HelmetProvider, Helmet } from "react-helmet-async"
import storage from "local-storage-fallback" import storage from "local-storage-fallback"
import { isIE } from "react-device-detect" import { isIE } from "react-device-detect"
@ -19,14 +23,17 @@ import Search from "./pages/Search"
import Page from "./pages/Page" import Page from "./pages/Page"
import NotFound from "./pages/NotFound" import NotFound from "./pages/NotFound"
// Theme that will be used throughout the website // wrapping it using css because prettier extension does not work well with styled-components
const GlobalStyle = createGlobalStyle<{ theme: { currentTheme: string } }>` // https://github.com/styled-components/vscode-styled-components/issues/175
const globalStyle = css`
body { body {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
} }
html, body, #root { html,
body,
#root {
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
@ -145,7 +152,8 @@ table {
width: 100%; width: 100%;
} }
table td, table th { table td,
table th {
border: ${(props) => border: ${(props) =>
theming.theme(props.theme.currentTheme, { theming.theme(props.theme.currentTheme, {
light: "1px solid #ddd", light: "1px solid #ddd",
@ -229,6 +237,11 @@ blockquote {
} }
` `
// Theme that will be used throughout the website
const GlobalStyle = createGlobalStyle<{
theme: { currentTheme: string }
}>`${globalStyle}`
const StyledP = styled.p` const StyledP = styled.p`
margin: auto; margin: auto;
font-size: 2rem; font-size: 2rem;