Jason
/
safaribook-aspnet-core5-and-react
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Chap04 -> Styling components with Emotion -> Styling the App component (Emotion styles in head tag)

Chap04
Jason Zhu 2022-03-28 19:36:40 +11:00
parent c98972dec9
commit e4f41e5d8d
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
QandA/frontend/src/App.tsx
View File

@ -4,14 +4,15 @@ import { css } from '@emotion/react';
import React from 'react'; import React from 'react';
import { Header } from './Header'; import { Header } from './Header';
import { HomePage } from './HomePage'; import { HomePage } from './HomePage';
import { fontFamily, fontSize, gray2 } from './Styles';
function App() { function App() {
return ( return (
<div <div
css={css` css={css`
font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; font-family: ${fontFamily};
font-size: 16px; font-size: ${fontSize};
color: #5c5a5a; color: ${gray2};
`} `}
> >
<Header /> <Header />

12
QandA/frontend/src/Styles.ts 100644
View File

@ -0,0 +1,12 @@
export const gray1 = '#383737';
export const gray2 = '#5c5a5a';
export const gray3 = '#857c81';
export const gray4 = '#b9b9b9';
export const gray5 = '#e3e2e2';
export const gray6 = '#f7f8fa';
export const primary1 = '#681c41';
export const primary2 = '#824c67';
export const accent1 = '#dbb365';
export const accent2 = '#efd197';
export const fontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif";
export const fontSize = '16px';