#Custom css

20 messages · Page 1 of 1 (latest)

quasi wigeon
# 
.input {
    &[data-variant='skovly'] {
        border: #a6c76f;
        border-width: thick;
        background-color: #f4fbe8;
        color: #91bb4d;
    }
}

.button {
    &[data-variant='skovly'] {
        color: #f4fbe8;
        background-color: #a6c76f;
    }
}

I can get the input to work fine, but if I try with button, it falls back to the default css.

# 
<Input                     variant="skovly"               placeholder="peter"></Input>
#

This one works fine

# 
<Button                     variant="skovly">Login</Button>

fails

lilac mulch
#

What fails? Is there any error?

quasi wigeon
#

Unfortunately no, it just falls back to default

#

This is with variant='skovly'

lilac mulch
quasi wigeon
#

It is being overridden, but my Input works fine at the same time

lilac mulch
quasi wigeon
#

My imports are below

lilac mulch
quasi wigeon
#

Alright thanks I'll give it a read :)
Do you have any text regarding changing themes on modals and drawers?

quasi wigeon
#

I've tried a lot to use my extended css but I cannot change it ever..
modal.module.css

.mantine-Modal-content {
    &[data-variant='skovly_modal'] {
        border-color: black;
        color: #ff6f00;
        background-color: #ff6f00;
    }
}

app.tsx


import modal from './components/themes/modal.module.css'

const theme = createTheme({
    components: {
        Input: Input.extend({ classNames: input }),
        Button: Button.extend({ classNames: button }),
        Text: Text.extend({ classNames: hyperlink }),
        Modal: Modal.extend({ classNames: modal }),
    }
})

<MantineProvider theme={theme}>
  <Modal
    variant="skovly_modal"
    opened={createModalOpened}
    onClose={closeCreateModal}>
        <CreateModal
        onSubmit={switchModal}
        onCancel={closeCreateModal}
        createUser={UpdateUser}/>
  </Modal>
...

I've tried this

lilac mulch
#

Also .mantine-Modal-content is not correct className, see Styles API documentation to learn how to apply styles with css modules and classNames prop

quasi wigeon
#

I wasnt trying to use classNames, but variants

#

Is this not possible?

lilac mulch