Asked thg 4 29, 6:41 AM 130 0 3
  • 130 0 3
+1

Ant desgin

Share
  • 130 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 thg 4 29, 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
Avatar tapcode @tapcode
thg 4 29, 8:02 AM

cảm ơn bn

0
| Reply
Share
Avatar tapcode @tapcode
thg 5 3, 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 thg 4 29, 7:01 AM
+1

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

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

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

0
| Reply
Share
thg 4 29, 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
Avatar tapcode @tapcode
thg 4 29, 7:46 AM

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

0
| Reply
Share
Answered thg 4 29, 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
Avatar tapcode @tapcode
thg 4 29, 7:47 AM

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

0
| Reply
Share
Avatar tapcode @tapcode
thg 5 2, 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
Avatar tapcode @tapcode
thg 5 2, 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
Viblo
Let's register a Viblo Account to get more interesting posts.