AppShell header and footer props

[codercody]

Currently, if you have an AppShell.Footer you have to put a footer={{height: 60}} or whatever in your AppShell component. Is there any way to just put the footer={...} into the AppShell.Footer tag and then it can automatically be passed up to AppShell?

My use case is I have my own custom nav that uses AppShell, and some of my pages have footers and some of them don't. Because of this, I have to pass the footer config into my nav as a prop. When in reality it would be a much nicer design if I could just specify this in the AppShell.Footer.

Also as a side note, I wish you could nest an AppShell.Footer in an AppShell.Main. Right now I have to do <MyNav><AppShell.Main>...</AppShell.Main></MyNav> for every single component because sometimes I want a footer. But if you could nest AppShell.Footer in an AppShell.Main then I could just put the AppShell.Main into MyNav and then just say <MyNav>...<AppShell.Footer>...</AppShell.Footer></MyNav> for pages with a footer.

[rtivital]

No, this can't be achieved because of one-way data flow in react. All these values are required on AppShell component to generate CSS variables that are used by child components. You can avoid setting footer={...} and other props on AppShell – to do this, you need to define CSS variables on your side. To learn which variables must be defined, see the component source code.