Width of the React-Slide-Sheet

[jian6137]

I tried using the library in my web app. Idk why the slide-sheet always sets the width to max. I want the width of the slide-sheet as same to the demo site, where it does not fully stretch to the width of the screen. Is there any css I can modify for this? I did successfully modified the class in the image below

and managed to change the width of the slide-sheet but is there any way I can modify this in the code? Seems like the css classes I modified in the DevTools are obfuscated. Thanks

[woofers]

@jian6137 Since this library uses CSS modules, the classnames applied are hashed and ideally should not be used for targeting.

By default React Sheet Slide is attached to the HTML body, but instead I would recommend you provide a fixed container to portal to. That way you can add an id or classname to the container and target the sheet that way.

Here is the Readme example updated:

import React, { useState, useRef } from 'react'
import { Sheet, Header, Content, Footer, detents, Portal } from 'react-sheet-slide'
import 'react-sheet-slide/style.css'

const App = () => {
  const [open, setOpen] = useState(false)
  const ref = useRef()
  return (
    <>
       <div id="react-sheet-slide"></div>
       {/* Ideally attach the above container to the top level of the app */}
      <div className="rss-backdrop" style={{ background: '#f7f8f8', minHeight: '100vh' }}>
        <button type="button" onClick={() => setOpen(true)} style={{ display: 'flex', margin: '28px auto 0' }}>
          Open sheet
        </button>
        <Portal containerRef="#react-sheet-slide">
          <Sheet
            ref={ref}
            open={open}
            onDismiss={() => setOpen(false)}
            onClose={() => {
              console.log('Component unmounted')
            }}
            selectedDetent={detents.large}
            detents={props => [
              detents.large(props),
              detents.fit(props)
            ]}
            useDarkMode={false}
            useModal={false}
            scrollingExpands={true}
          >
            <Header>Title</Header>
            <Content>
              <div style={{ padding: '54px 16px 24px' }}>
                <div>Add more storage to keep everything on online</div>
                <div>
                  Online includes plenty of storage to keep all your data safe and
                  features to protect your privacy.
                </div>
                <div>Learn More About Online</div>
              </div>
            </Content>
            <Footer>
              <button type="button" onClick={() => setOpen(false)}>
                Close
              </button>
            </Footer>
          </Sheet>
        </Portal>
      </div>
    </>
  )
}

Notice the containerRef="#react-sheet-slide" prop that portals the sheet into that container.

Now you can just target the sheet and apply the new width:

#react-sheet-slide > div > div {
  --width: min(100%, 640px);
}

Let me know if that resolves your issue and I will close this out.

[jian6137]

Thanks! Fixed the Issue.