Skip to content
This repository was archived by the owner on Jun 1, 2023. It is now read-only.

Conversation

pmeinhardt
Copy link

Hey, thanks for this awesome and clean component! 💚

The documentation suggests the following approach to customizing the component styles:

// Override variables
$reactTagColorGray: #e1e1e1 !default;
$reactTagColorText: #333 !default;
$reactTagHeight: 2.375em !default;
$reactTagFontSize: 1em !default;
$reactTagBorderRadius: 3px !default;
$reactTagMarginPadding: 0.1875em !default;

// Import the SCSS file
@import "node_modules/@pathofdev/react-tag-input/src/styles/index.scss";

At the moment however, index.scss will then redefine these values, so the overrides do not actually take effect. Instead, the variable definitions in the react-tag-input index.scss need to use !default for it to use any previously defined, custom values.

For reference, please see: https://sass-lang.com/documentation/variables#default-values

Sass provides the !default flag. This assigns a value to a variable only if that variable isn’t defined or its value is null. Otherwise, the existing value will be used.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant