Asked Apr 29th, 6:41 AM 110 0 3
  • 110 0 3
0

Ant desgin

Share
  • 110 0 3

mình mới dùng ant design với reactjs. giả sử mình có 1 modal của ant design nằm trong 1 component Login. mình tạo ra 1 file css riêng là Login.css. nhưng lúc build project lên thì modal nó ko nằm trong component Login mà nó lại nằm cùng cấp với index.js vậy mọi người. nếu muốn css cho Modal thì lại phải ra index.css mới css dx. mình muốn css Modal nẳm trong Login.css thì phải làm thế nào. Mong moi người chỉ dẫn.

3 ANSWERS


Answered Apr 29th, 7:41 AM
Accepted
+1

các thư viện modal nói chung đều sử dụng React Portal để render modal outside component, muốn style thì phải truyền style dạng global là oke nhé, còn cụ thể thì có nhiều cách

Share
tapcode @tapcode
Apr 29th, 8:02 AM

cảm ơn bn

0
| Reply
Share
tapcode @tapcode
Monday, 6:16 PM

@cuong_nguyen bn ơi ns thêm về truyền style dạng glolbal với bạn.

0
| Reply
Share
Answered Apr 29th, 7:01 AM
+1

Dùng getContainer={() => document.getElementById(#id)}

#id là id của thẻ bạn cần bọc modal
Share
tapcode @tapcode
Apr 29th, 7:05 AM

cụ thể hơn với bn ơi, mình chưa hiểu

0
| Reply
Share
Apr 29th, 7:12 AM

@tapcode Đây bạn nhé

<div id='login'>
    <Modal /> ---> Modal này nằm ngay sau body
    <Modal getContainer={() => document.getElementById('login')} /> ---> Modal này nằm trong div#login
</div>
0
| Reply
Share
tapcode @tapcode
Apr 29th, 7:46 AM

cảm ơn bn, để mình thử xem sao.

0
| Reply
Share
Answered Apr 29th, 7:14 AM
+1

vấn đề này của bạn có 2 cách giải quyết nhé

Cách 1: bạn F12 lên tìm đến cái modal đó rồi xem class của nó là gì, rồi bạn dùng class đó định nghĩa lại trong file Login.css (Có thể tìm hiểu về SCSS để tối ưu code css hơn)

Cách 2: Bạn vẫn tạo css class cho modal đó trong Login.css bình thường, sau đó bạn truyền thêm 1 property là class vào cho modal, giá trị của prop này là tên class bạn vừa tạo

Share
tapcode @tapcode
Apr 29th, 7:47 AM

cảm ơn bn nhìu nhé.

0
| Reply
Share
tapcode @tapcode
May 2nd, 8:52 AM

mình đã tạo class cho modal, nhưng sao để nó trong scc của Singup thì nó lại ko ăn (trường hop 1), mà để ngoài nó mới ăn (trường hợp 2) mặc dù trong file js thì modal nó nẳm trong Singup Component. modal2.png

0
| Reply
Share
tapcode @tapcode
May 2nd, 8:54 AM

và tại sao lúc build lên, Modal ko nằm trong root app mà nằm ngoài bnmodal1.png

0
| Reply
Share