'Is mixng plain CSS "style" with Bootstrap "class" good practice?

Is using plain CSS inline "style" and React-Bootstrap "className" at the same time a bad practice?

    <FormControl
        type="search"
        placeholder="Search"
        aria-label="Search"
        className="me-2"
        style={{ width: "500px" }}
    />
cssreactjsreact-bootstrap


Solution 1:[1]

You can overwrite bootstrap styles with inline styles because of CSS specificity. But if you need to reuse a bootstrap component in multiple places with the same specific custom styles, you should just customize the bootstrap component once with SASS. This ensures fewer duplicate styles on your part. See this.

But I would really suggest utility first frameworks (like tailwind) if you want to have unique, custom components.

Solution 2:[2]

No, it's alright. Inline css specially in React is very handy and time saving sometimes. As long as it does not create confusion in future, writing inline style is ok, no hard rule. As per your code whenever needed inspecting an element will show obvious inline style, so no confusion arises there. Keep up the good work <3

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 atiquemorshed
Solution 2 Mujeeb Shaikh

Related Questions