You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We should consider having a dedicated page showing all the CSS variables with an example of how to override them. Otherwise, maybe there should be an example of how to override the variables on each component that has CSS variables.
Right now, someone looking at the Container docs has to go looking for the docs for overriding the CSS variables in another component.
The most intuitive docs pages one might look for documentation on adjusting the container widths unfortunately do not document how to override these variables:
Container sizes use the following max-width values, which may be customized if needed.
It doesn't say how to do that though.
Container does expose a maxWidth prop, but that is only useful as a one-off need to use a different max-width. I expected the Theme component provider to expose a prop to customize the CSS variables or something but I did not see that either.
What is the best practice for customizing the Container max widths, or any other CSS variables for that matter.
The text was updated successfully, but these errors were encountered:
We document CSS variable customisation in the larger styling guides, e.g. here for fonts. You can use a similar approach, overriding those container variables on the .radix-themes element
ckeeney
changed the title
How do you customize the Container max widths globally?
Improve documentation on customizing the CSS variables (e.g. the Container max widths)
May 5, 2024
We should consider having a dedicated page showing all the CSS variables with an example of how to override them. Otherwise, maybe there should be an example of how to override the variables on each component that has CSS variables.
Right now, someone looking at the Container docs has to go looking for the docs for overriding the CSS variables in another component.
The most intuitive docs pages one might look for documentation on adjusting the container widths unfortunately do not document how to override these variables:
The original issue was really more of a support question. I've left it below for historical reasons but the issue above is more actionable.
Original issue:
The text was updated successfully, but these errors were encountered: