اجزای مدل شده یک است CSS-in-JS کتابخانه ای که به شما کمک می کند CSS را در یک جز write بنویسید. در اینجا در این پست ، من بیش از اصول لازم برای دانستن توضیح خواهم داد.
معرفی
شما می توانید CSS scoped بنویسید به این معنی که CSS فقط برای آن عنصر در م theلفه اعمال می شود ، بدون اینکه ریخته شود. هنوز می توانید بنویسید CSS جهانی.
چرا؟
- پیشوندهای فروشنده اتوماتیک
- نام کلاس های منحصر به فرد ، به این معنی است که هیچ کلاس نامی از اشکالات ندارد
- سبک های استفاده نشده را حذف می کند
- تطبیق بر اساس لوازم جانبی
- از SSR (Server Side Rendering) نیز پشتیبانی می کند
در حال نصب
شروع شدن
import styled from 'styled-components';
const Button = styled.button`
font-size: 1.5rem;
padding: 2em;
`;
//in React
دکمه – لوازم جانبی
const Button = styled.button`
font-size: 1.5em;
padding: 2em;
color: ${
props = (props.primary ? 'blue' : 'black')
};
`;
// In react
گسترش سبک ها
const Button = styled.button`
font-size: 1.5em;
padding: 2em;
`;
// Extend the button
const BlueButton - styled(Button)`
color: blue;
`;
برای استفاده مجدد از سبک ها
export const Button = styled.button`
font-size: 1.5em;
padding: 2em;
`;
// DEFINE & EXPORT, Re-use
موضوع
یک تم مجموعه ای از همه مواردی است که ما در یک برنامه مانند رنگ ، فاصله و غیره استفاده می کنیم. این تعریف …