Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

[Grid] Add CSS Module, inline prop, and reduce inline styles

Đang mở
#618 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tái cấu trúc
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
css, react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu tại packages/raystack/raystack/components/grid/ và kiểm tra entry point của Grid cùng với triển khai inline-style hiện tại của nó. So sánh pattern styling được các component khác sử dụng, sau đó xác minh rằng CSS Module, CSS custom properties và inline prop bao quát các cải tiến được yêu cầu mà không thay đổi hành vi layout hiện có.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

component triage

Summary

Grid is a custom layout primitive using Radix Slot for asChild support. Uses all inline styles with no CSS Module.

Improvements

1. Add CSS Module

Grid has no CSS Module — all styles are inline. Add a CSS Module for consistency with other components and to enable design token usage.

2. Use CSS custom properties for dynamic values

Instead of inline styles, use CSS custom properties set via style prop and referenced in the CSS Module. This allows easier theming and override.

4. Add inline prop for inline-grid

No way to use display: inline-grid.

Moved to Cross-Cutting Issues

The following items have been moved to cross-cutting issues that address them across all components:

  • Add displayName (#676)

Files

  • packages/raystack/raystack/components/grid/
Ngôn ngữ chính
TypeScript
Star
70
Fork
13
Merge trung bình
8 ngày 56 phút
Pull request đã merge (30 ngày)
16

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của raystack/apsara

Tất cả issue của raystack/apsara

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.