SASS variable overrides

[jamesmosier]

First off, thanks for creating this project! I am beginning to use it and it has been very easy to integrate. I was wondering if you've thought about a way to implement overrides for any of the SASS variables in Bulma? What comes to mind is overriding what the primary color is or the default font-family.

I'd be happy to help with this, but I don't know what that implementation would look like.

[kulakowka]

You can build CSS with custom variables.
And then you can create custom index file in your project like this:

import './css/bulma.css'

export { default as Box } from 'reactbulma/Box/Box'
export { default as Button } from 'reactbulma/Button/Button'
//...

[EmiPhil]

This is the code that I needed to use:

// components/index.js

// processed somehow
import './bulma.css'

export { default as Box } from 'reactbulma/lib/components/Box/Box'
export { default as Button } from 'reactbulma/lib/components/Button/Button'
export { default as Card } from 'reactbulma/lib/components/Card/Card'
export { default as Checkbox } from 'reactbulma/lib/components/Checkbox/Checkbox'
export { default as Container } from 'reactbulma/lib/components/Container/Container'
export { default as Content } from 'reactbulma/lib/components/Content/Content'
export { default as Control } from 'reactbulma/lib/components/Control/Control'
export { default as Delete } from 'reactbulma/lib/components/Delete/Delete'
export { default as Field } from 'reactbulma/lib/components/Field/Field'
export { default as Heading } from 'reactbulma/lib/components/Heading/Heading'
export { default as Hero } from 'reactbulma/lib/components/Hero/Hero'
export { default as Icon } from 'reactbulma/lib/components/Icon/Icon'
export { default as Image } from 'reactbulma/lib/components/Image/Image'
export { default as Input } from 'reactbulma/lib/components/Input/Input'
export { default as Level } from 'reactbulma/lib/components/Level/Level'
export { default as Link } from 'reactbulma/lib/components/Link/Link'
export { default as Media } from 'reactbulma/lib/components/Media/Media'
export { default as Message } from 'reactbulma/lib/components/Message/Message'
export { default as Nav } from 'reactbulma/lib/components/Nav/Nav'
export { default as Notification } from 'reactbulma/lib/components/Notification/Notification'
export { default as Panel } from 'reactbulma/lib/components/Panel/Panel'
export { default as Progress } from 'reactbulma/lib/components/Progress/Progress'
export { default as Section } from 'reactbulma/lib/components/Section/Section'
export { default as Table } from 'reactbulma/lib/components/Table/Table'
export { default as Tabs } from 'reactbulma/lib/components/Tabs/Tabs'
export { default as Tag } from 'reactbulma/lib/components/Tag/Tag'
export { default as Textarea } from 'reactbulma/lib/components/Textarea/Textarea'
export { default as Title } from 'reactbulma/lib/components/Title/Title'
export { default as SubTitle } from 'reactbulma/lib/components/Title/Subtitle'

And in files referencing these components:

import { Button } from '../components'
// instead of
// import { Button } from 'reactbulma'

[skbolton]

I am not a huge fan of this. I thought that the user could install bulma themselves and customize it the way the docs have it. Then react-bulma was just consuming the classnames.
@kulakowka is there a way we could make it so that react-bulma requires and builds based off of the sass version and it gives users the chance to change the initial variables first?

For example I almost always do this when using bulma

@import '~bulma/sass/utilities/initial-variables';
@import 'variables';

// CUSTOMIZE BULMA CSS STYLES
$primary: $orange;
$info: $blue;
$success: $green;
$warning: $yellow;
$danger: $alt-red;
$link: $primary;
$menu-label-color: white;
$menu-item-color: hsl(0, 0%, 86%);
$menu-item-hover-background-color: $gray;
$menu-item-hover-color: white;
$menu-item-active-background-color: $blue;
$modal-background-background-color: rgba($midnight, 0.9);
$modal-card-head-padding: 16px;
$table-row-hover-background-color: lighten($midnight, 65%);

@import '~bulma';

Now all the colors are changed everywhere. Being able to require the sass version of bulma would aslo mean that people can just require react-bulma and not have to require from a potentially nested crazy path

[skbolton]

^ I realized after thinking about this that it wouldn't be realistic to add a buildstep/api to consume the sass version of bulma. Instead I think that the bulma dependecy should be a peer to this project and users should install it and customize it how ever they want. Or they could just add the css through a link tag. react-bulma could then just consume the classnames. Then if they want to use a newer version of bulma they can just install it and work with it. As it is now if the library ever falls behind and I want to use the new one I would have 2 versions installed and the react bulma wouldn't have the same styles.

[twhite96]

I can't get this to work, even with a custom sass file with variable overrides. It's still the same default $primary color. Any ideas on how to get this working?

[mauriciogior]

This worked for me:

import 'bulma/css/bulma.css' // Your custom bulma css

export { default as Box } from 'reactbulma/lib/components/Box/Box'
export { default as Button } from 'reactbulma/lib/components/Button/Button'
export { default as Card } from 'reactbulma/lib/components/Card/Card'
export { default as Checkbox } from 'reactbulma/lib/components/Checkbox/Checkbox'
export { default as Container } from 'reactbulma/lib/components/Container/Container'
export { default as Content } from 'reactbulma/lib/components/Content/Content'
export { default as Control } from 'reactbulma/lib/components/Control/Control'
export { default as Delete } from 'reactbulma/lib/components/Delete/Delete'
export { default as Field } from 'reactbulma/lib/components/Field/Field'
export { default as Heading } from 'reactbulma/lib/components/Heading/Heading'
export { default as Hero } from 'reactbulma/lib/components/Hero/Hero'
export { default as Icon } from 'reactbulma/lib/components/Icon/Icon'
export { default as Image } from 'reactbulma/lib/components/Image/Image'
export { default as Input } from 'reactbulma/lib/components/Input/Input'
export { default as Level } from 'reactbulma/lib/components/Level/Level'
export { default as Link } from 'reactbulma/lib/components/Link/Link'
export { default as Media } from 'reactbulma/lib/components/Media/Media'
export { default as Message } from 'reactbulma/lib/components/Message/Message'
export { default as Nav } from 'reactbulma/lib/components/Nav/Nav'
export { default as Notification } from 'reactbulma/lib/components/Notification/Notification'
export { default as Panel } from 'reactbulma/lib/components/Panel/Panel'
export { default as Progress } from 'reactbulma/lib/components/Progress/Progress'
export { default as Section } from 'reactbulma/lib/components/Section/Section'
export { default as Table } from 'reactbulma/lib/components/Table/Table'
export { default as Tabs } from 'reactbulma/lib/components/Tabs/Tabs'
export { default as Tag } from 'reactbulma/lib/components/Tag/Tag'
export { default as Textarea } from 'reactbulma/lib/components/Textarea/Textarea'
export { default as Title } from 'reactbulma/lib/components/Title/Title'
export { default as SubTitle } from 'reactbulma/lib/components/Title/SubTitle'