File tree Expand file tree Collapse file tree 9 files changed +18
-22
lines changed Expand file tree Collapse file tree 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`.
122122There are several demos hosted on [ CodePen] ( https://codepen.io ) which
123123demonstrate various features of react-modal:
124124
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.
44
55One thing to note is that by using the className property you will override all default styles.
66
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 22
33If you'll be using several modals and want to adjust styling for all of them in one location you can by modifying ` Modal.defaultStyles ` .
44
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 22
33This example shows how to use inline styles to adjust the modal.
44
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 22
33This example shows the minimal needed to get React Modal to work.
44
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.
66
77Also more important if ` shouldCloseOnOverlayClick ` is set to ` true ` , when clicked on overlay it calls ` onRequestClose ` .
88
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/>.
55This is due to the fact that the ` react-modal ` doesn't store the ` isOpen `
66on its state (only for the internal ` portal ` (see [ ModalPortal.js] ( https://github.com/reactjs/react-modal/blob/master/src/components/ModalPortal.js ) ).
77
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