From 7cf8463e7a855c43e010caf55b2c98a69130ed0f Mon Sep 17 00:00:00 2001 From: Clay Diffrient Date: Wed, 6 Apr 2016 22:27:00 -0600 Subject: [PATCH] [doc] Update docs to include details about CSS classes --- README.md | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 61d082c0..7fb28543 100644 --- a/README.md +++ b/README.md @@ -9,12 +9,13 @@ Accessible modal dialog component for React.JS isOpen={bool} onRequestClose={fn} closeTimeoutMS={n} - style={customStyle}> - + style={customStyle} +>

Modal Content

Etc.

``` + ## Styles Styles are passed as an object with 2 keys, 'overlay' and 'content' like so ```js @@ -48,9 +49,17 @@ Styles are passed as an object with 2 keys, 'overlay' and 'content' like so Styles passed to the modal are merged in with the above defaults and applied to their respective elements. At this time, media queries will need to be handled by the consumer. -###Overriding styles globally +### Using CSS Classes + +If you prefer not to use inline styles or are unable to do so in your project, +you can pass `className` and `overlayClassName` props to the Modal. If you do +this then none of the default styles will apply and you will have full control +over styling via CSS. + -The default styles above are available on `Modal.defaultStyles`. +### Overriding styles globally +The default styles above are available on `Modal.defaultStyles`. Changes to this +object will apply to all instances of the modal. ## Examples Inside an app: