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

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" }}
    />

CodePudding user response：

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

CodePudding user response：

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.