File tree 9 files changed +18
-22
lines changed 9 files changed +18
-22
lines changed Original file line number Diff line number Diff line change @@ -122,10 +122,10 @@ local development server using `npm start` or `yarn run start`.
122
122
There are several demos hosted on [ CodePen] ( https://codepen.io ) which
123
123
demonstrate various features of react-modal:
124
124
125
- * [ Minimal example] ( https://codepen.io/claydiffrient /pen/KNxgav )
126
- * [ Using setAppElement ] ( https://codepen.io/claydiffrient /pen/ENegGJ )
127
- * [ Using onRequestClose ] ( https://codepen.io/claydiffrient /pen/KNjVBx )
128
- * [ Using shouldCloseOnOverlayClick ] ( https://codepen.io/claydiffrient /pen/woLzwo )
129
- * [ Using inline styles ] ( https://codepen.io/claydiffrient /pen/ZBmyKz )
130
- * [ Using CSS classes for styling ] ( https://codepen.io/claydiffrient /pen/KNjVrG )
131
- * [ Customizing the default styles] ( https://codepen.io/claydiffrient /pen/pNXgqQ )
125
+ * [ Minimal example] ( https://codepen.io/neilhsmith /pen/QWVVEEg )
126
+ * [ Using onRequestClose ] ( https://codepen.io/neilhsmith /pen/OJooXBg )
127
+ * [ Using shouldCloseOnOverlayClick ] ( https://codepen.io/neilhsmith /pen/wvEYxKa )
128
+ * [ Using inline styles ] ( https://codepen.io/neilhsmith /pen/gOdZPPP )
129
+ * [ Using CSS classes for styling ] ( https://codepen.io/neilhsmith /pen/abaPNYm )
130
+ * [ Using styled-components ] ( https://codepen.io/neilhsmith /pen/gOdJGxp )
131
+ * [ Customizing the default styles] ( https://codepen.io/neilhsmith /pen/abaPNGm )
Original file line number Diff line number Diff line change @@ -4,4 +4,4 @@ If you prefer to use CSS to handle styling the modal you can.
4
4
5
5
One thing to note is that by using the className property you will override all default styles.
6
6
7
- [ CSS classes example] ( https://codepen.io/claydiffrient /pen/KNjVrG )
7
+ [ CSS classes example] ( https://codepen.io/neilhsmith /pen/abaPNYm )
Original file line number Diff line number Diff line change 2
2
3
3
If you'll be using several modals and want to adjust styling for all of them in one location you can by modifying ` Modal.defaultStyles ` .
4
4
5
- [ Global overrides example] ( https://codepen.io/claydiffrient /pen/pNXgqQ )
5
+ [ Global overrides example] ( https://codepen.io/neilhsmith /pen/abaPNGm )
Original file line number Diff line number Diff line change 2
2
3
3
This example shows how to use inline styles to adjust the modal.
4
4
5
- [ inline styles example] ( https://codepen.io/claydiffrient /pen/ZBmyKz )
5
+ [ inline styles example] ( https://codepen.io/neilhsmith /pen/gOdZPPP )
Original file line number Diff line number Diff line change 2
2
3
3
This example shows the minimal needed to get React Modal to work.
4
4
5
- [ Minimal example] ( https://codepen.io/claydiffrient /pen/KNxgav )
5
+ [ Minimal example] ( https://codepen.io/neilhsmith /pen/QWVVEEg )
Original file line number Diff line number Diff line change @@ -6,4 +6,4 @@ This is especially important for handling closing the modal via the escape key.
6
6
7
7
Also more important if ` shouldCloseOnOverlayClick ` is set to ` true ` , when clicked on overlay it calls ` onRequestClose ` .
8
8
9
- [ onRequestClose example] ( https://codepen.io/claydiffrient /pen/KNjVBx )
9
+ [ onRequestClose example] ( https://codepen.io/neilhsmith /pen/OJooXBg )
Load Diff This file was deleted.
Original file line number Diff line number Diff line change @@ -5,6 +5,4 @@ it requires the `onRequestClose` to be defined in order to close the <Modal/>.
5
5
This is due to the fact that the ` react-modal ` doesn't store the ` isOpen `
6
6
on its state (only for the internal ` portal ` (see [ ModalPortal.js] ( https://github.com/reactjs/react-modal/blob/master/src/components/ModalPortal.js ) ).
7
7
8
- [ disable 'close on overlay click', codepen by claydiffrient] ( https://codepen.io/claydiffrient/pen/woLzwo )
9
-
10
- [ enable 'close on overlay click', codepen by sbgriffi] ( https://codepen.io/sbgriffi/pen/WMyBaR )
8
+ [ shouldCloseOnOverlayClick example] ( https://codepen.io/neilhsmith/pen/wvEYxKa )
Original file line number Diff line number Diff line change
1
+ # styled-components
2
+
3
+ To use styled-components you must override the default inline styles by providing a className and/or overlayClassName. You can then provide your own styled component to the contentElement and overlayElement props.
4
+
5
+ [ styled-components example] ( https://codepen.io/neilhsmith/pen/gOdJGxp?editors=1011 )
You can’t perform that action at this time.
0 commit comments