- 작은 사이즈
- 간단한 사용
- 의존성 없음
- Theming 지원
- Server-Side Rendering 지원
- Server Comonent 지원
?style=flat-square&logo=react){kind=icon}
?style=flat-square&logo=next.js){kind=icon}
pnpm add basic-styledimport basic-styled from 'basic-styled';
function App() {
return (
<Box>App</Box>
);
}
const Box = styled.div`
border: 1px solid;
`;// App.tsx
import ThemeProvider from 'basic-styled/setup/ThemeProvider';
const theme = {
palette: {
primary: '#007bff',
}
}
return (
<ThemeProvider theme={theme}>
<div>App</div>
</ThemeProvider>
);// with TypeScript
import "basic-styled";
declare module "basic-styled" {
export interface BasicTheme {
palette: {
primary: string;
};
}
}// layout.tsx
import createBuilder from "basic-styled/setup/createBuilder";
const theme = {
palette: {
primary: '#007bff',
}
}
createBuilder({
prefix: 'basic-styled', // prefix for class name, default is 'basic-styled'
theme
});
return (
<html lang="ko">
<body>
{...}
</body>
</html>
);// providers.tsx
'use client';
import ThemeProvider from 'basic-styled/setup/ThemeProvider';
const theme = {
palette: {
primary: '#007bff',
}
}
return (
<ThemeProvider theme={theme}>
<div>App</div>
</ThemeProvider>
);