Forums

Give help. Get help.

  • # January 12, 2018 at 8:35 am

    I am using bitters to add stuff on components, like shadows on inputs. However, when I want to customize my components, I must override the values that are set by bitters.

    I can use !important but it is recommended to avoid it when possible for the sake of structure. In general specificity gives priority. So perhaps there is a trick to make the a new rule more specific.

    How to override a library without using exclamation mark important?

    # January 12, 2018 at 8:40 am

    Without some code we really can’t help.

    However, specifity or the CSS cascade will help.

    On the other hand whatever “bitters” is, if it’s using inline styles then !important is, essentially, your only option.

    # January 12, 2018 at 10:49 am

    bitters is not inline. It is an sass library, part of bourbon, a popular SASS mixins library.
    http://refills.bourbon.io/components/

    My problems can be simplified to making the class “my-nice-input” more specific and to take priority without using important.

    Problem 1:

    input[type="submit"] {
      border-color: blue;
    }
    
    .my-nice-input {
      border-color: red exclamation mark important;
    }
    

    Problem 2, the full problem:
    Be more specific than the rule with an id selector all-text-inputs for defining inputs in bitters see below.
    I think id selectors are taking precedence.
    https://github.com/bigardone/phoenix-react-redux-template/blob/master/web/static/css/bitters/_forms.sass

    It would be nice if you can solve problem 1 or 2 above.

    # January 15, 2018 at 12:56 am

    Without an example it’s hard to say. But let’s assume you use a custom stylesheet, then make sure you use CSS selectors with at least the same selector as the style you want to override, or make it more specific. I understand you don’t want to use important. I’m not a big fan of using IDs for styling as well.
    So you can either use your own added classnames, the same CSS selector, or a more specific CSS selector using the context your element is in.
    And then make sure your custom stylesheet is loaded later then the library you use.

    # January 15, 2018 at 6:30 am

    An id will have a higher specificity, as said in the CSS specification.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag