Yêu cầu thg 4 29, 2021 6:41 SA 147 0 3
  • 147 0 3
+1

Ant desgin

Chia sẻ
  • 147 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 CÂU TRẢ LỜI


Đã trả lời thg 4 29, 2021 7:41 SA
Đã được chấp nhận
+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

Chia sẻ
Avatar tapcode @tapcode
thg 4 29, 2021 8:02 SA

cảm ơn bn

Avatar tapcode @tapcode
thg 5 3, 2021 6:16 CH

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

Đã trả lời thg 4 29, 2021 7:01 SA
+1

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

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

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

thg 4 29, 2021 7:12 SA

@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>
Avatar tapcode @tapcode
thg 4 29, 2021 7:46 SA

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

Đã trả lời thg 4 29, 2021 7:14 SA
+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

Chia sẻ
Avatar tapcode @tapcode
thg 4 29, 2021 7:47 SA

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

Avatar tapcode @tapcode
thg 5 2, 2021 8:52 SA

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

Avatar tapcode @tapcode
thg 5 2, 2021 8:54 SA

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

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí