styled-components#createGlobalStyle TypeScript Examples

The following examples show how to use styled-components#createGlobalStyle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: GlobalTheme.ts From dxvote with GNU Affero General Public License v3.0

6 votes

GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    color: ${({ theme }) => theme.colors.text};
    background-color: ${({ theme }) => theme.colors.background};
    font-family: ${({ theme }) => theme.fonts.body};
    font-weight: ${({ theme }) => theme.fontWeights.regular};
    line-height: ${({ theme }) => theme.lineHeights.body};
    font-size: ${({ theme }) => theme.fontSizes.body};
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  strong, b {
    font-weight: ${({ theme }) => theme.fontWeights.medium};
  }

  code {
    font-family: ${({ theme }) => theme.fonts.monospace};
  }

  button {
    font-family: ${({ theme }) => theme.fonts.body};
    font-weight: ${({ theme }) => theme.fontWeights.regular};
  }
  `

Example #2

Source File: index.tsx From cuiswap with GNU General Public License v3.0

6 votes

FixedGlobalStyle = createGlobalStyle`
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.018em;
  font-display: fallback;
}
@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
`

Example #3

Source File: GlobalStyles.tsx From frontend with GNU General Public License v3.0

6 votes

GlobalStyles = createGlobalStyle`
    * {
        ${typography.globalStyles};
    }
    *, *::before, *::after {
        box-sizing: border-box;
    }
    body{
        margin: 0;
    }
`

Example #4

Source File: layout.tsx From gonear-name with The Unlicense

6 votes

GlobalStyle = createGlobalStyle`
  :root {
    --root-background: #181B21;
    --header-height: 90px;
    --header-height__mob: 56px;
    --margin: 30px;
    --margin__mob: 25px;
  }

  body {
    background: var(--root-background);
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
  }
`

Example #5

Source File: global.ts From github-explorer with MIT License

6 votes

GlobalStyles = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: #F0F0F5 url(${githubBackground}) no-repeat 70% top;
    --webkit-font-smoothing: antialiased;
  }

  #root, body, html {
    height: 100%;
  }

  #root {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
  }

  body, button, textarea, input {
    font: 16px Roboto, sans-serif;
  }

  button {
    cursor: pointer;
  }

  ul {
    list-style: none;
  }
`

Example #6

Source File: GlobalStyles.ts From copy-image-clipboard with MIT License

6 votes

GlobalStyles = createGlobalStyle`
  *, *::before, *::after {
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
  }

  html {
    font-size: 62.5%;
    overflow-x: hidden;
  }

  html, body, #root {
    height: 100%;
    overflow-x: hidden;

    margin: 0;
    padding: 0;
    outline: 0;

    background: ${({ theme }) => theme.background};
    color: ${({ theme }) => theme.primaryText};
  }

  body, #root {
    font-size: 1.4rem;
  }

  button {
    font-size: 1.4rem;
    color: ${({ theme }) => theme.primaryText};
  }

  svg {
    overflow: initial;
  }
`

Example #7

Source File: ThemeProvider.style.ts From design-system with Apache License 2.0

6 votes

GlobalStyle = createGlobalStyle`  
	html {
		/* 1rem = 10px */
		font-size: 62.5%;
	}
	
	body {
		margin: 0;
		padding: 0;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 14px;
		color: ${({ theme }) => theme?.colors.textColor};
		background: ${({ theme }) => theme?.colors.backgroundColor};
	}

	a {
		text-decoration: none;
	}
	
	[role="list"]  {
		margin: 0;
		padding: 0;
	}
	
	.focus-outline-hidden *:focus {
		outline: none;
	}

	::selection {
		color: ${tokens.colors.gray[900]};
		background-color: ${tokens.colors.coral[100]};
	}
	
	.sr-only {
		${hideVisually()}
	}
`

Example #8

Source File: GlobalStyle.ts From useDApp with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
  }

  html,
  body,
  #root {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: ${Font.Body};
    background-color: ${Colors.Background};
    color: ${Colors.Text};
    font-size: 16px;
    line-height: 1;
  }
`

Example #9

Source File: index.tsx From sybil-interface with GNU General Public License v3.0

6 votes

FixedGlobalStyle = createGlobalStyle`
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  font-display: fallback;
}


@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}


html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
  
}
`

Example #10

Source File: GlobalStyle.ts From NextPay with MIT License

6 votes

GlobalStyles = createGlobalStyle`
    html, body {
        margin: 0;
        padding: 0;
    }
    *, *::after, *::before {
        box-sizing: border-box;
    }
    body {
        background: linear-gradient(0deg, rgba(101,181,252,1) 0%, rgba(145,202,255,1) 100%);
        color: black;
        font-family: 'Manrope', sans-serif;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
`

Example #11

Source File: global-styles.ts From netflix-clone with MIT License

6 votes

GlobalStyles = createGlobalStyle`
	html, body {
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		background-color: black;
		color: #333333;
		font-size: 16px;
	}
`

Example #12

Source File: GlobalStyles.tsx From crypto-capsule with MIT License

6 votes

GlobalStyle = createGlobalStyle`
    :root {
        --main: #5268A1;
        --sub: #82B4D1;
        --primary: rgb(215, 151, 211);
        --primary-light: rgba(215, 150, 211, 0.1);
        --primary-shadow: rgba(215, 150, 211, 0.6);
        --dark: #5268A1;
        --bg: #F8F2F2;
        --danger: #ef5252;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Caveat', cursive;
      font-size: 10px;
    }
  
    button {
      background: none;
      border: none;
      outline: none;
    }

    a{
        text-decoration: none;
    }
  `

Example #13

Source File: GlobalStyle.ts From cheeseswap-interface with GNU General Public License v3.0

6 votes

FixedGlobalStyle = createGlobalStyle`
    html, input, textarea, button {
      font-family: Noto Sans, 'Inter',sans-serif;
      letter-spacing: -0.018em;
      font-display: fallback;
    }
    @supports (font-variation-settings: normal) {
      html, input, textarea, button {
        font-family: Noto Sans, 'Inter',sans-serif;
      }
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    button {
      user-select: none;
    }

    html {
      font-family: Noto Sans,'Inter', sans-serif;
      font-size: 14px;
      font-variant: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
`

Example #14

Source File: App.tsx From craft-extension-inspirations with MIT License

6 votes

GlobalStyles = createGlobalStyle`
  html, body, #react-root {
    height: 100%;
  }
  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "lnum" 1;
    -webkit-font-feature-settings: "lnum" 1;
    font-feature-settings: "lnum" 1;
  }
  html, body {
    padding: 0;
    margin: 0;
    font-family: system-ui, -apple-system;
  }
`

Example #15

Source File: app.tsx From webminidisc with GNU General Public License v2.0

6 votes

GlobalStyles = createGlobalStyle`
${styleReset}
body {
    font-family: 'ms_sans_serif';
}
img {
    image-rendering: pixelated;
}
`

Example #16

Source File: _app.tsx From website with Apache License 2.0

6 votes

GlobalStyles = createGlobalStyle`
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
html {
  background: ${({ theme }) => theme.background.backgroundColor};
  scroll-behavior: smooth;

}
body {
  max-width: 100vw;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0.25em;
}
 
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: ${({ theme }) => theme.background.backgroundColor};

}
 
::-webkit-scrollbar-thumb {
  background: gray;
  border-radius: 8px;
  outline: 1px solid ${({ theme }) => theme.background.backgroundColorLight}9d;
}
`

Example #17

Source File: style.tsx From react-use-intercom with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  :root {
    --light: #ffffff;
    --dark: #181818;
    --cyan: #6afdef;
    --grey: #f4f0eb;
  }

  html {
    font-size: 15px;
  }

  h1, 
  h2, 
  h3,
  h4,
  h5,
  h6,
  p {
    color: var(--dark);
    line-height: 1.75rem;
  }

  body {
    font-family: 'Hind', Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
  }

  code {
    background: var(--grey);
    border-radius: 2px;
    font-family: 'Fira Code', monospace;
    font-size: 0.825rem;
    padding: 0.075rem 0.35rem;
  }
`

Example #18

Source File: _app.tsx From covid19map with MIT License

6 votes

Styles = createGlobalStyle`
  ${({ theme }) => css`
    html,
    body {
      padding: 0;
      margin: 0;
      font-family: "Nunito", sans-serif;
      background: ${theme.light};
    }
    button,
    a {
      font-family: "Nunito", sans-serif;
      transition: all 0.3s ease;
    }
    button:hover,
    a:hover {
      opacity: 0.7;
    }
    button {
      cursor: pointer;
      outline: none;
    }
    .inline-icon {
      display: inline-block;
      svg {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
  `}
`

Example #19

Source File: index.tsx From dyp with Do What The F*ck You Want To Public License

6 votes

FixedGlobalStyle = createGlobalStyle`
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  font-display: fallback;
}
@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
  
}
`

Example #20

Source File: app.styled.ts From react-weather-app with GNU General Public License v3.0

6 votes

GlobalStyles = createGlobalStyle`
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
}
html {
  font-size: 16px;
}
body {
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: url(${({ theme }) => theme.backgroundImage}) no-repeat center 120%, linear-gradient(${({ theme }) =>
  theme.backgroundGradient.color1} 0%, ${({ theme }) => theme.backgroundGradient.color2} 100%);
  background-size: auto;
}
#root {
  max-width: 960px;
  width: 100%;
  margin: auto 0;
  padding: 0 1rem;
}
`

Example #21

Source File: index.tsx From limit-orders-lib with GNU General Public License v3.0

6 votes

FixedGlobalStyle = createGlobalStyle`
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  font-display: fallback;
}
@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

 a {
   color: ${colors(false).blue1}; 
 }

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: 'ss01' on, 'ss02' on,  'cv01' on, 'cv03' on;
  
}
`

Example #22

Source File: Global.tsx From glide-frontend with GNU General Public License v3.0

6 votes

GlobalStyle = createGlobalStyle`
  * {
    font-family: 'Nunito', sans-serif;
  }
  body {
    background-color: #060914;

    img {
      height: auto;
      max-width: 100%;
    }
  }
`

Example #23

Source File: GlobalStyle.ts From safe-app-template with MIT License

6 votes

GlobalStyle = createGlobalStyle`
    html {
        height: 100%
    }

    body {
       height: 100%;
       margin: 0px;
       padding: 0px;
    }

    #root {
        height: 100%;
        padding-right: 0.5rem;
    }

    .MuiFormControl-root,
    .MuiInputBase-root {
        width: 100% !important;
    }

    @font-face {
        font-family: 'Averta';
        src: local('Averta'), local('Averta Bold'),
        url(${avertaFont}) format('woff2'),
        url(${avertaBoldFont}) format('woff');
    }
`

Example #24

Source File: Global.ts From goose-frontend-amm with GNU General Public License v3.0

6 votes

GlobalStyle = createGlobalStyle`
  body {
    background-color: ${({ theme }) => theme.colors.background};

    img {
      height: auto;
      max-width: 100%;
    }
  }
`

Example #25

Source File: index.tsx From skeleton-web3-interface with GNU General Public License v3.0

6 votes

FixedGlobalStyle = createGlobalStyle`
html, input, textarea, button {
  font-family: 'Inter', sans-serif;
  font-display: fallback;
}
@supports (font-variation-settings: normal) {
  html, input, textarea, button {
    font-family: 'Inter var', sans-serif;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

button {
  user-select: none;
}

html {
  font-size: 16px;
  font-variant: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
  
}
`

Example #26

Source File: Confirmation.tsx From idena-pocket with MIT License

6 votes

GlobalStyle = createGlobalStyle`
	.swal-button {
		border: 0!important;
	}
	.swal-button--confirm {
		background: ${colors.black};
	}
	.swal-button--confirm:hover {
		background: ${colors.darkBlack}!important;
	}
`

Example #27

Source File: theme.tsx From recoil-todo-list with MIT License

6 votes

GlobalStyles = createGlobalStyle`
    body {
        background-color: ${(props: any) => props.theme.background};
        color: ${(props: any) => props.theme.text};
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
        box-sizing: border-box;
        font-family: Sen;
        user-select: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin: 0;
    }

    #root {
        width: 100vw;
    }

    * {
        transition: 0.2s color ease-in-out, 0.2s background-color ease-in-out;
    }
`

Example #28

Source File: Layout.tsx From iplocate with MIT License

6 votes

Global = createGlobalStyle`
  * {
    box-sizing: border-box;
  }
  html, body {
    padding: 0;
    margin: 0;
    height: 100%;
  }
`

Example #29

Source File: globalTheme.ts From nlw06-letmeask with MIT License

6 votes

GlobalStyle = createGlobalStyle`
 *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  html{
    font-size:62.5%;
    scroll-behavior:smooth;
    background:${({ theme }) => theme.colors.bg.body}
  }
  body, input, button, textarea{
    font:400 ${({ theme }) => theme.font.sizes.md} ${({ theme }) => theme.font.secondary};
  }
`