With React Spectrum, how do I correctly fill the page background? #7255
-
|
I'm following the getting started guide, so my code looks like this: function App() {
return (
(
<Provider theme={defaultTheme}>
<Button
variant="accent"
onPress={() => alert('Hey there!')}
>
Hello, React Spectrum!
</Button>
</Provider>
)
);Out of the box, this creates an ugly partially-filled background: 
I can sort of fix that by setting Screen.Recording.2024-10-24.at.8.03.59.PM.mov |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
|
Setting the body background color to the same color as the app div should work. |
Beta Was this translation helpful? Give feedback.
-
|
Are you suggesting doing something like Edit: This does not seem possible as far as I can tell. React gives us no reasonable way to monitor the div for changes to |
Beta Was this translation helpful? Give feedback.
-
|
Are you trying to use React Spectrum to build a new Adobe app? Otherwise you can do something like https://codesandbox.io/p/sandbox/zk5sfz I know it's a little clunky, it'll be easier in S2, but I don't know if you can use that yet. |
Beta Was this translation helpful? Give feedback.
-
Non-Adobe, but happy to accept Adobe styles and opinions for the sake of prototyping.
Totally. I'll get there eventually. :)
On iOS, that technique has the unfortunate side effect of disabling the pull-to-refresh gesture. (It seems like it triggers when the root element scrolls.) May or may not be acceptable, depending on the app. |
Beta Was this translation helpful? Give feedback.
-
I hadn't noticed this, thanks for pointing it out. If this is just for prototyping and you're planning to move to RAC eventually with custom styling, it may be easier to start with https://react-spectrum.adobe.com/react-aria/getting-started.html#starter-kits as the API's between React Spectrum and RAC are not completely 1:1. They'll be more similar in Spectrum 2 because we're building on top of RAC for that, but it's still in pre-release. |
Beta Was this translation helpful? Give feedback.
-
|
@snowystinger Is there any update on estimated release date/month for Spectrum 2? I think I have seen an official estimate of "sometime in 2024". I am wondering if this is still the case. |
Beta Was this translation helpful? Give feedback.
-
|
I don't have an exact date right now, but it's in prerelease, so you are welcome to try it out. Some APIs may be subject to change, but the code itself is pretty stable. |
Beta Was this translation helpful? Give feedback.
Are you trying to use React Spectrum to build a new Adobe app?
If this is a non-Adobe/Adobe-themed app, then you can do it any way you like using RAC instead https://react-spectrum.adobe.com/react-aria/index.html as it's bring your own styles.
Otherwise you can do something like https://codesandbox.io/p/sandbox/zk5sfz
I know it's a little clunky, it'll be easier in S2, but I don't know if you can use that yet.