I got a problem with the tailwind preflight. It's resetting some styles globally, which I really don't want it to. And disabling preflight would be a huge amount of work.
So, is there a way to use a css famework just inside the Vue.js scope without it affecting other styles of the page (I'm using Vue on top of an existing project)?
Importing it as usual:
import { createApp } from "vue";
import ImportConfig from "~/components/data_import/import_config/ImportConfig.vue";
import "~/styles/main.css";
Won't do the trick, cause the styles are accessible globally.
Also using VUe's custom-components ain't a proper solution cause these are using the shadow dom.
Related
I want the capability to overwrite react-bootstrap (Sass) in a Next.js app. I have this working fine in React apps, but I've been unsuccessful getting it to work in Next.js. I don't want it set globally, set in _app.js, because I need it at the component level. Ideally, I'd like do something like this inside the somename.module.scss file:
#import '~bootstrap/scss/bootstrap';
And then below that, define my classnames to extend bootstrap classes, like this:
.goright {
#extend .text-right;
}
And if this isn't possible, is there another approach to achieve the same outcome with the Next framework?
As I learned more about the purpose of css modules, I realized that I was going about this all wrong. Next supports CSS-in-JS (styled-jsx), which provides most of the kind of customization I need to do.
In my React Application,i'm using React-Bootstrap and i've imported
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
In order to style some other components, i imported MDBreact library, when i did so,the components (that were styled using bootstrap.min.css) have been effected by the exist of MDB library.
Any suggestion to resolve this issue would be appreciated
Theorically, just import what you need where you need it ? You usually import bootstrap in your main component, but if you want it only in a child, nothing prevent you from importing it here.
I usually define global styles in index.css. What is the best practice to define global style? When should I put it in index.css vs App.css when I work on React app?
For a React app, the best practice is to put every component in its own directory containing its corresponding JS and CSS files. The App component is the topmost component in a React app for wrapping all components. There aren't any predefined rules for using App.css or index.css for global CSS.
Check out this article for React styling best practices: https://medium.com/the-non-traditional-developer/styling-best-practices-using-react-c37b96b8be9c
Relevant question: index.css vs. App.css in default app created by "create-react-app" -- what's the difference?
I come form an Angular background. In Angular, you have a global styles. When you overwrite the same classes in your component's styles, then it gets overwritten just fine.
In React, I have created my own global styles and imported it at the top of my index.js using import './global-styles.scss';. This makes the global styles reach all components just fine. My problem is I can't overwrite the global styles in my local "component" styles. I know I can use "hacks" like !important but that is not the type of solution I am looking for.
How can I change things to have my local "component" styles overwrite my "global" styles?
If you come form an Angular background then you will understand exactly what I mean, for React people, I hope my question makes sense :)
I'm trying to apply separate styleSheets for every child component by importing different styleSheets in different components but fails to achieve this as styles are being overwritten.
Sample Code: Stackblitz
childa.jsx:
import React from 'react';
import "./childa.css"
export default () => <h1>Child A!</h1>;
childa.css:
h1 {
color: blue;
}
childb.jsx:
import React from 'react';
import "./childb.css"
export default () => <h1>Child B!</h1>;
childb.css:
h1 {
color: red;
}
This is just a sample code. Need solution for a project having large styleSheets.
Based on your clarification in one of your comments:
The thing is I'm converting a project from angular to react and all
the css is already written so I can't use inline style. Is there any
way in which I don't have to rename all the css classes in all the
stylesheets?
Short ans: You can't achieve that as of now.
This article explains all the different ways to style react components. In your case, the best that you can do is use css modules and rename generic classes like h1 to .h1.
Check this great article about css modules: Modular CSS with React.
Note: css modules are not available in create-react-app. If you must use it here's an
article on how to use CSS Modules with create-react-app.
I think this is caused by ther order of the imports.
In your parent component you have something like
import React from 'react'
import ChildA from './ChildA'
import ChildB from './ChildB'
This means that in the compiled code you'll have the two stylesheets imported one after the other, and the second h1 rule will overwrite the first
You should use classes for your components, or use inline style
Importing a css does not wrap it in the scope of the component is just a straight import into the DOM. In order to mantain a separation of components styles you have to approach with another solution, as styled-components.
This may not work for your entire application, but I fixed it by applying a class to the element (.childA and .childB). This solved the problem.
export default () => <h1 className='childB'>Child B!</h1>;