Các thành phần Twind
Thành phần được mở rộng của styled-components ưu tiên việc sử dụng tên lớp cho Tailwind CSS. Sử dụng cú pháp biểu thức mẫu, bạn có thể viết tên lớp và mã CSS cho thành phần. Giống như styled-components! Có sẵn trong styled-components v5 và phiên bản cao hơn. Với vscode-twined-components, hỗ trợ tô sáng cú pháp và thông minh khi nhập tên lớp và mã CSS.
// with Tailwind CSS
const Button = twined.button`
text-white bg-indigo-500 rounded-lg
`;
// with Fontawesome
const IconReact = twined.i`
fab fa-react
`;
Twind-components là một thành phần được mở rộng của styled-components trả về thành phần được tạo kiểu.
Tại sao chọn Twind-components
Hầu hết các khung CSS được tạo dựa trên tên lớp. Styled-components cũng có thể viết tên lớp. Tuy nhiên, nó được thiết kế để làm cho việc nhập mã CSS dễ dàng hơn việc viết tên lớp. Tuy nhiên, thường chúng ta viết tên lớp trước và chỉnh sửa chi tiết bằng cách viết mã CSS khi sử dụng khung CSS. Twind-components được thiết kế để viết tên lớp trước.
Cài đặt
Twind-components là một thành phần mở rộng đơn giản của styled-components. Do đó, cần phụ thuộc vào styled-components.
npm i styled-components twined-components
Ví dụ
// with Tailwind CSS
// with Fontawesome
import React from "react";
import twined from "twined-components";
// button base
const BorderlessButton = twined.button`
border-0 px-6 py-2 rounded-lg
`;
// close button
const Close = twined(BorderlessButton)`
hidden absolute right-0 top-0 transform translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-black text-white rounded-full
items-center justify-center
fas fa-times
`;
const ModalBackground = twined.div`
fixed w-full h-full flex items-center justify-center bg-black bg-opacity-25 box-border p-10
`;
// Close is styled-components, so you can use the classname of Close.
const Modal = twined.div`
relative flex items-center justify-center w-full h-full p-4 bg-white shadow text-2xl rounded-lg
`.css`
:hover ${Close} {
display: flex;
}
`;
// Twined-components returns styled-components and can be expanded. It also optionally supports writing CSS as a JavaScript object instead of CSS code.
const Button = twined(BorderlessButton)`
block ml-5
`.css(({ primary }) => ({
...(primary && { color: "white", background: "salmon", fontWeight: "bold" }),
}));
<ModalBackground>
<Modal>
Hello World, this is my first twined component!
<Button primary>Ok</Button>
<Close />
</Modal>
</ModalBackground>;
Hỗ trợ Typescript
import twined from "twined-components";
const Button = twined.button<{primary: boolean}>`
${({parimary}) => parimary : 'text-white bg-indigo-500' : ''} border-0 px-6 py-2 rounded-lg
`.css`
text-align: center;
${({parimary}) => parimary : 'font-weight: bold;' : ''}
`;
<Button primary>Click</Button>
Hỗ trợ kiểu tương tự như styled-components. Các props được chỉ định với kiểu được chuyển đến cả khu vực lớp và css một cách bình đẳng.
Cho các phiên bản khác
Nó cũng hoạt động trong phiên bản styled-components v4.1.0 và cao hơn, nhưng có một số hạn chế.
v4.2.0 và cao hơn
Không thể mở rộng tên lớp. Thay vào đó, styled-component có thể được mở rộng. Example
v4.1.0 và cao hơn
Khi chuyển styled-components cho props trong phương thức css, không thể nhận được tên lớp tương ứng từ mã scss.
Lộ trình phát triển
- Thêm Tô sáng Cú pháp
- Thêm Rút trích Kiểu
- Thêm Mã Kiểm tra
Chi tiết Tải về:
Tác giả: lowfront
Nguồn: https://github.com/lowfront/twined-components
Giấy phép: MIT license
Cảm ơn bạn!
