fixed global style auto formatting issue
This commit is contained in:
parent
ecffddf877
commit
159cbc293a
1 changed files with 212 additions and 199 deletions
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue