5 cách viết kiểu CSS trong React – xác định css trong thành phần phản ứng

Năm cách khác nhau để tạo kiểu cho các thành phần của bạn trong React. Bạn thích cái nào hơn? 🤔

Bạn đang xem: xác định css trong thành phần phản ứng

Có nhiều cách để tạo kiểu cho các thành phần React của bạn. 🤓

Trong hướng dẫn này, chúng tôi sẽ trình bày các cách tạo kiểu cho các thành phần React. Chúng tôi sẽ chỉ cho bạn 5 cách khác nhau và bạn sẽ quyết định cách nào bạn thích nhất! 😁

Tạo kiểu cho thành phần của bạn theo cách của bạn

Đây là những cách tạo kiểu thành phần mà chúng ta sẽ thảo luận:

Chúng tôi sẽ thay thế các kiểu giống nhau bên dưới bằng các cách tạo kiểu thành phần khác nhau.

 

. nút

{

color

:

# 494949

;

text-biến đổi

:

chữ hoa

;

text-decoration

:

none

;

background

:

#ffffff

;

padding

:

20px

;

font-size

:

20px

;

border

:

4px solid # 494949

;

display

:

inline-block

;

chuyển đổi

:

tất cả 0,4 giây dễ dàng 0 giây

;

}

. button: hover

{

color

:

#ffffff

;

background

:

# f6b93b

;

border-color

:

# f6b93b

;

chuyển đổi

:

tất cả 0,4 giây dễ dàng 0 giây

;

}

. button - chính

{

color

:

#ffffff

;

text-biến đổi

:

chữ hoa

;

text-decoration

:

none

;

background

:

# f6b93b

;

padding

:

20px

;

font-size

:

20px

;

border

:

4px solid # f6b93b

;

display

:

inline-block

;

chuyển đổi

:

tất cả 0,4 giây dễ dàng 0 giây

;

}

. button - primary: hover

{

color

:

# 494949

;

background

:

#ffffff

;

border-color

:

# 494949

;

chuyển đổi

:

tất cả 0,4 giây dễ dàng 0 giây

;

}

CSS thông thường

Đây là cách dễ dàng và đơn giản nhất để thêm các kiểu vào một thành phần React.

  

nhập

React

từ

< p class = "chuỗi mã thông báo"> 'phản ứng'

;

nhập

'./ BeautifulButton.css'

;

const

MyBeautifulButton

=

đạo cụ

= & gt;

{

trả về

(

& lt;

div

& gt;

& lt;

button className

=

{

props

.

chính

?

'nút - chính'

:

'nút'

}

& gt; < / p> Cái nút Nút

& lt;

/

& gt;

& lt;

/

div

& gt;

)

;

}

;

xuất

mặc định

MyBeautifulButton

;

Tạo kiểu nội tuyến

  

nhập

React

từ

< p class = "chuỗi mã thông báo"> 'phản ứng'

;

const

MyBeautifulButton

=

đạo cụ

= & gt;

{

const

button

=

{

color

:

'# 494949'

,

textTransform

:

'chữ hoa'

,

textDecoration

:

'không có'

,

background

:

'# ffffff'

,

padding

:

'20px'

,

fontSize

:

'20px'

,

biên giới

:

'4px solid # 494949'

,

hiển thị

:

'inline-block'

,

chuyển đổi

:

'hết 0,4 giây dễ dàng 0 giây'

}

;

const

primaryButton

=

{

...

nút

,

color

:

'# ffffff'

,

background

:

'# f6b93b'

,

borderColor

:

'# f6b93b'

}

;

trả về

(

& lt;

div

& gt;

& lt;

button style

=

{

props

.

primary

?

primaryButton

:

nút

}

& gt;

Nút

& lt;

/

nút

& gt;

& lt;

/

div

& gt;

)

;

}

;

xuất

mặc định

MyBeautifulButton

;

Lưu ý: Hộp đựng lạc đà là cần thiết để tạo kiểu nội tuyến hoạt động! Ví dụ: borderColor .

Đây là cách đơn giản và dễ hiểu nhất để thêm kiểu vào một thành phần React.

Tạo kiểu nội tuyến rất đơn giản và hoạt động hiệu quả nhưng có nhiều hạn chế.

Ví dụ: không có cách nhíu mày thẳng để thêm hiệu ứng di chuột .

Đề xuất: Chỉ sử dụng mô hình tạo kiểu nội tuyến với các thành phần đơn giản nhỏ. 😇

Mô-đun CSS

  

nhập

React

từ

< p class = "chuỗi mã thông báo"> 'phản ứng'

;

nhập

styles

từ

'./ my-beautiful-button.module.css '

;

const

MyBeautifulButton

=

đạo cụ

= & gt;

{

trả về

(

& lt;

div

& gt;

Nút

& lt;

className

=

{

đạo cụ

.

chính

?

styles

[

'nút - chính'

]

:

styles

.

nút

}

& gt;

Cái nút Nút

& lt;

/

& gt;

& lt;

/

div

& gt;

)

;

}

;

xuất

mặc định

MyBeautifulButton

;

Tất cả các kiểu từ một mô-đun CSS có phạm vi trong thành phần đã nhập nó. Điều đó có nghĩa là bạn không phải lo lắng về xung đột tên toàn cầu. 😌

Lưu ý: Bạn phải bao gồm phần mở rộng phụ .module trong tên. Nếu không, các kiểu sẽ tải như CSS thông thường và bạn có thể có xung đột tên.

Tiền xử lý

Sử dụng các bộ tiền xử lý như SCSS , LESS hoặc < span rel = "nofollow noopener noreferrer" target = "_ blank"> Stylus được sử dụng thẳng trong React.

Bạn cần thêm trình tải tiền xử lý và sau đó theo cách giống như CSS thông thường, bạn có thể nhập tệp.

  

nhập

React

từ

< p class = "chuỗi mã thông báo"> 'phản ứng'

;

nhập

'./ button.scss'

;

const

MyBeautifulButton

=

đạo cụ

= & gt;

{

trả về

(

& lt;

div

& gt;

& lt;

button className

=

{

props

.

chính

?

'nút - chính'

:

'nút'

}

& gt; < / p> Cái nút Nút

& lt;

/

& gt;

& lt;

/

div

& gt;

)

;

}

;

xuất

mặc định

MyBeautifulButton

;

CSS trong JS

CSS trong JS là một mẫu mà bạn sẽ xác định tất cả các kiểu của mình bên trong thành phần. Giống như tạo kiểu nội tuyến nhưng mạnh mẽ hơn rất nhiều.

Hãy xem cách chúng ta sẽ viết các kiểu nút giống nhau bằng cách sử dụng Thành phần được tạo kiểu Cảm xúc .

Các thành phần được tạo kiểu

  

nhập

Phản ứng

từ

'phản ứng'

;

nhập

theo kiểu

từ

'styled-components'

;

const

MyBeautifulButton

=

đạo cụ

= & gt;

{

const

BeautifulButton

=

theo kiểu

.

nút

`

màu: # 494949; text-biến đổi: chữ hoa; văn bản-trang trí: không có; nền: #ffffff; đệm: 20px; font-size: 20px; viền: 4px solid # 49499; display: inline-block; chuyển tiếp: tất cả 0,4s dễ dàng 0s; & amp;: di chuột vào { màu: #ffffff; nền: # f6b93b; màu viền: # f6b93b; chuyển tiếp: tất cả 0,4s dễ dàng 0s; }

`

;

const

BeautifulPrimaryButton

=

theo kiểu

(

Nút

)

`

màu: #ffffff; nền: # f6b93b; màu viền: # f6b93b; & amp;: di chuột vào { màu: # 494949; nền: #ffffff; màu viền: # 49499; }

`

;

trả về

(

& lt;

div

& gt;

{

props

.

primary

?

(

& lt;

BeautifulPrimaryButton

& gt;

Nút

& lt;

/

BeautifulPrimaryButton

& gt;

)

:

(

& lt;

BeautifulButton

& gt;

Nút

& lt;

/

BeautifulButton

& gt;

)

}

& lt;

/

div

& gt;

)

;

}

;

xuất

mặc định

MyBeautifulButton

;

Cảm xúc

Cảm xúc có hai cách để thêm kiểu, API css và API kiểu.

Dưới đây là một ví dụ về cách sử dụng API css trông như thế nào:

 
 

nhập

React

từ

'react'

;

nhập

{

jsx

,

css

}

từ

'@ feel / core'

;

const

BeautifulButton

=

css

`

màu: # 494949; text-biến đổi: chữ hoa; văn bản-trang trí: không có; nền: #ffffff; đệm: 20px; font-size: 20px; viền: 4px solid # 49499; display: inline-block; chuyển tiếp: tất cả 0,4s dễ dàng 0s; & amp;: di chuột vào { màu: #ffffff; nền: # f6b93b; màu viền: # f6b93b; chuyển tiếp: tất cả 0,4s dễ dàng 0s; }

`

;

const

BeautifulPrimaryButton

=

css

`

$ {

Nút

}

< / p>

; màu: #ffffff; nền: # f6b93b; màu viền: # f6b93b; & amp;: di chuột vào { màu: # 49499; nền: #ffffff; màu viền: # 49499; }

`

;

const

MyBeautifulButton

=

đạo cụ

= & gt;

{

trả về

(

& lt;

div

& gt;

& lt;

button css

=

{

"dấu câu mã thông báo">.

primary

?

BeautifulPrimaryButton

:

BeautifulButton

}

& gt;

Nút

& lt;

/

nút

& gt;

& lt;

/

div

& gt;

)

;

}

;

xuất

mặc định

MyBeautifulButton

;

API được tạo kiểu của Emotion rất giống với các Thành phần được tạo kiểu. Đây là một ví dụ:

 
 

nhập

React

từ

'react'

;

nhập

{

jsx

,

css

}

từ

'@ feel / core'

;

nhập

theo kiểu

từ

'@ feel / styled'

;

const

BeautifulButton

=

theo kiểu

.

nút

`

màu: # 49499; text-biến đổi: chữ hoa; văn bản-trang trí: không có; nền: #ffffff; đệm: 20px; font-size: 20px; viền: 4px solid # 49499; display: inline-block; chuyển tiếp: tất cả 0,4s dễ dàng 0s; & amp;: di chuột vào { màu: #ffffff; nền: # f6b93b; màu viền: # f6b93b; chuyển tiếp: tất cả 0,4s dễ dàng 0s; }

`

const

BeautifulPrimaryButton

=

theo kiểu

(

BeautifulButton

)

`

màu: #ffffff; nền: # f6b93b; màu viền: # f6b93b; & amp;: di chuột vào { màu: # 49499; nền: #ffffff; màu viền: # 49499; }

`

const

MyBeautifulButton

=

(

đạo cụ

)

= & gt; < / p>

{

trả về

(

& lt;

div

& gt;

{

props

.

primary

?

& lt;

BeautifulPrimaryButton

& gt;

Nút

& lt;

/

BeautifulPrimaryButton

& gt;

:

& lt;

BeautifulButton

& gt;

Nút

& lt;

/

BeautifulButton

& gt;

}

& lt;

/

div

& gt;

)

;

}

;

xuất

mặc định

MyBeautifulButton

;

Lưu ý: Bạn có thể thêm plugin babel để tránh ghi dòng trên cùng của tệp bắt buộc.

   

CSS trong JS là một mẫu mạnh mẽ. Nó giúp mọi thứ dễ dàng hơn rất nhiều khi xây dựng các ứng dụng web phức tạp lớn.

Có một điểm khác biệt chính giữa Thành phần được tạo kiểu và Cảm xúc.

Thành phần được tạo kiểu chỉ cung cấp API được tạo kiểu. Tuy nhiên, Emotion cung cấp hai cách để thêm các kiểu: API css các API được tạo kiểu .

Đề xuất: Đối với các ứng dụng lớn, chúng tôi khuyên bạn nên sử dụng Cảm xúc. 👌

Dưới đây là các CSS khác trong thư viện JS đáng xem:

Giờ bạn đã biết các tùy chọn của mình khi nói đến các thành phần tạo kiểu! Bạn thích cái nào hơn? 🤔


Xem thêm những thông tin liên quan đến chủ đề xác định css trong thành phần phản ứng

4 cách CĂN GIỮA khối trong html css có thể bạn chưa biết | Học html css cơ bản

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-12-22
  • Đánh giá: 4 ⭐ ( 9537 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này hướng dẫn bạn 4 cách để canh giữa khối trong css. Nó cực kỳ quan trọng trong việc xây dựng layout website của bạn.
    ------
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ------------
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    --------------------------
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

Tổng hợp các thuộc tính của CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 1943 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp và phân loại tất cả các thuộc tính của CSS theo các nhóm Color, Background và Borders, Box, Text, Fonts, Table, Animation, Transform, Transition, v.v.

Cách sử dụng CSS Selector để xác định các phần tử Web trong các kịch bản Selenium

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 1414 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trước khi đi vào chi tiết chúng ta cùng tìm hiểu:

Tổng hợp các thuộc tính của CSS - DinhNT

  • Tác giả: dinhnt.com
  • Đánh giá: 4 ⭐ ( 2778 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách chèn CSS vào blog.

  • Tác giả: gocsinhvien.forum-viet.com
  • Đánh giá: 5 ⭐ ( 4133 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS là một loại ngôn ngữ dàn trang, định kiểu cho các thành phần của trang Web hay Blog. Nói vậy chung chung quá, nôm na CSS như là người đi mua kiểu bàn ghế, k

Tổng quan về HTML CSS JAVASCRIPT – Khái niệm và vai trò của nó trong website

  • Tác giả: isinhvien.com
  • Đánh giá: 5 ⭐ ( 8916 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này mình sẽ nói tóm lượt cơ bản về khái niệm và vai trò của HTML CSS JAVASCRIPT trong một website theo hướng nông dân nhất và theo kiểu hiểu của mình. Hy vọng sẽ giúp được cho bạn nào trong những ngày đầu lớ ngớ học code.

Position trong CSS có thuộc tính gì? 4 tài liệu về CSS Position hay nhất

  • Tác giả: teky.edu.vn
  • Đánh giá: 3 ⭐ ( 7093 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có muốn hiểu về những thuộc tính Position trong CSS hay không? Bài viết này sẽ mang đến chính xác thông tin cho bạn, đừng bỏ qua nhé.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm thế nào để làm tròn một số thành hai chữ số thập phân trong PHP? - Trường học về web - Tự học phát triển web và thiết kế web từng bước với giải thích dễ dàng - php làm tròn đến 2 chữ số thập phân