Inline style inheritance

[TimChild]

Describe the bug Docs on https://reflex.dev/docs/styling/overview/#styling say that

Children components inherit inline styles unless they are overridden by their own inline styles. But, that doesn't seem to be the case in the example given

To Reproduce Problem occurs in reflex docs

Expected behavior Expect "Default Button" text to be blue

Screenshots

Specifics (please complete the following information):

• Browser (Optional): Chrome

Additional context This might be a change in behaviour from the recent move to radix, but I'm not sure. Either way, the docs should be updated to whatever is correct now :)

[TimChild]

Looks like the problem is with the rx.button (and possibly other components).

With this:

@rx.page(route='/styling_test', title='Styling Test', description='Test of the styling')
def index() -> rx.Component:
    return rx.container(
        rx.heading("Styling Test", size="5"),
        rx.box(
            rx.hstack(
                rx.text("This is a test of the styling"),
                rx.text("This is a test of the styling", color='green'),
            ),
            border="1px solid red",
            color='orange'
        ),
        rx.box(
            rx.hstack(
                rx.button("button 1"),
                rx.button("button 2", color='green'),
            ),
            border="1px solid yellow",
            color='orange'
        )
    )

The result is:

edit: Adding some more examples:

@rx.page(route='/styling_test', title='Styling Test', description='Test of the styling')
def index() -> rx.Component:
    return rx.container(
        rx.heading("Styling Test", size="5"),
        rx.box(
            rx.hstack(
                rx.heading("heading"),
                rx.link('link'),
                rx.text_area("text_area"),
                rx.input(default_value="input"),
                rx.moment("moment"),
                rx.select(['opt 1', 'opt 2'], placeholder='select'),
                rx.button("button"),
                rx.card("card"),
                wrap='wrap',
            ),
            border="1px solid yellow",
            color='orange'
        )
    )

So it seems like these components don't inherit the color prop at least:

• link
• text_area
• input
• select
• button

Whereas these components do:

• heading
• text
• moment -- FYI, docs are missing for this component
• card

What's the correlation between these? Is it some way the components are defined?

Will this also affect inheritance of other props similarly, or just specific ones? (Seems to do the same with font_size at least)

[masenf]

i think many of the radix themes components for form controls apply a css reset that overrides the value set in the outer container.

[TimChild]

That makes sense...

Probably just a quick change of the docs to use rx.text or similar as the example would be good then. And maybe a small note that at least some of the themed components will override that behaviour.