hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.28k stars 288 forks source link

`fabInset` breaks color theme of `BottomAppBar`'s `Section` #583

Open Vinalti opened 1 year ago

Vinalti commented 1 year ago

Describe the bug When using BottomAppBar with the attribute color:"primary", if the attribute fabInset is present, the color of the Section will be the wrong one(and not the one of my theme)

To Reproduce Steps to reproduce the behavior:

  1. Create a project
  2. Include SMUI Theme and BottomAppBar
  3. Change primary color to desired one
  4. Add a <BottomAppBar color:"primary">
  5. Add inside <section> with icons
  6. Add a <section fabInset> with <fab> inside
  7. See difference in color

(See below)

Expected behavior The actual primary color should be used.

Screenshots image


<div id="mobile_menu">
    <BottomAppBar bind:this={bottomAppBar} color="primary">
        <Section id="menu_list">
            <IconButton class='material-icons'>home</IconButton>
            <IconButton class='material-icons'>map</IconButton>
            <IconButton class='material-icons'>list</IconButton>
        </Section>
        <Section fabInset>
            <IconButton class='material-icons'>list</IconButton>
            <Fab aria-label="Reply">
                <Icon class="material-icons">search</Icon>
            </Fab>
        </Section>
    </BottomAppBar>
</div>

Desktop :