GlobalStyle κ³Ό Theme
π² CSS Reset
> CSS Tools: Reset CSS
λͺ¨λ HTML νκ·Έμλ κΈ°λ³Έ μ€νμΌμ΄ μ μ©λμ΄μλλ°, μ΄λ¬ν μμ±λ€μ μ€νμΌμ μ‘μ λ μ€νλ € λΆνΈνκΈ° λλ¬Έμ μ€νμΌμ μ΄κΈ°ν μμΌμ€λ€.
λ€μ λ§ν΄, μ΄κ²μ μμμ μ΄μ§ μλ μ μλ λ
립λ λΈλλ°μ€κ° μλλλ€.
npm styled-reset
> styled-reset github
곡μ κΉνμμ 보면 Styled Components 3.x or 2.x λ²μ μΈ κ²½μ°μλ, injectGlobal api λ₯Ό μ¬μ©νλΌκ³ κΆμ₯νκ³ , styled-reset@1.7.1 λ₯Ό μ€μΉνλΌκ³ κΆμ₯νλ€.
νμμ (2024λ
3μ) μ¬μ©νλ Styled Components μ λ²μ μ 6.x μ΄λ€.
μ¬μ©
import { Reset } from 'styled-reset';
export default function App() {
return (
<div>
{/* μ΅μμμ μΈν
ν΄μ€λ€. */}
<Reset />
</div>
);
}
Global Style μ μ©
λ¨Όμ src/styles ν΄λλ₯Ό μμ± ν GlobalStyle.ts νμΌμ λ§λ λ€.
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
font-size: 62.5%; // 1rem = 10px
}
body {
font-size: 1.6rem; // 1.6rem = 16px
}
:lang(ko) {
h1, h2, h3 {
word-break: keep-all;
}
}
`;
export default GlobalStyle;
App.tsx μμ GlobalStyle μ μ¬μ©νλ€. (λ¨, λ°λμ App.tsx μΌ νμλ μμ)
import { Reset } from 'styled-reset';
import GlobalStyle from './styles/GlobalStyle';
export default function App() {
return (
<div>
{/* μ΅μμμ μΈν
ν΄μ€λ€. */}
<Reset />
<GlobalStyle />
</div>
);
}
Theme
Design System μ λ°λΌμ Theme λ₯Ό μ§μ ν΄μ μ¬μ©νλ€.
defaultTheme
src/styles/defaultTheme.ts νμΌμ λ§λ λ€.
const defaultTheme = {
colors: {
background: '#FFF',
text: '#000',
primary: '#F00',
secondary: '#00F',
},
};
export default defaultTheme;
src/styles/darkTheme.ts νμΌμ λ§λ λ€.
import Theme from './Theme';
const darkTheme: Theme = {
colors: {
background: '#000',
text: '#FFF',
primary: '#F00',
secondary: '#00F',
},
};
export default darkTheme;
κ°μ μμΉμ Theme.ts νμΌμ μμ±νλλ°, νμ
μ μ§μ νκΈ° μν¨μ΄λ€.
import defaultTheme from './defaultTheme';
type Theme = typeof defaultTheme;
export default Theme;
κ°μ μμΉμ styled.d.ts νμΌ μμ±νλ€.
μμ μμ±ν GlobalStyle.ts μμ νμ
μ μ‘μ§ λͺ»νλ μ΄μλ₯Ό ν΄κ²°νκΈ° μν¨μ΄λ€.
import 'styled-components';
import Theme from './Theme';
declare module 'styled-components' {
export interface DefaultTheme extends Theme {
// colors: {
// background: string;
// text: string;
// primary: string;
// secondary: string;
// };
}
}
GlobalStyle.ts μ Theme μμ± μ μ©νκΈ°
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
font-size: 62.5%; // 1rem = 10px
}
body {
font-size: 1.6rem; // 1.6rem = 16px
background: ${(props) => props.theme.colors.background};
color: ${(props) => props.theme.colors.text};
}
:lang(ko) {
h1, h2, h3 {
word-break: keep-all;
}
}
`;
export default GlobalStyle;
Last updated