I have a React app, I am building this app using ParcelJS. In this app I have included an NPM package (zalify/easy-email) which styles its component by using a CSS import:
import "#arco-themes/react-easy-email-theme/css/arco.css";
The import overwrites some of my styles since Parcel treats all css imports as global imports:
By default, CSS imported from JavaScript is global. If two CSS files define the same class names, ids, custom properties, #keyframes, etc., they will potentially clash and overwrite each other. To solve this, Parcel supports CSS modules.
I'd like to not have my styles overridden. According to the Parcel docs I can use CSS modules for this. They state:
To use CSS modules, create a file with the .module.css extension, and import it from a JavaScript file with a namespace import. Then, you can access each of the classes defined in the CSS file as an export from the module.
import * as classes from './styles.module.css';
document.body.className = classes.body;
Is there a way to pass the imported CSS module to the component that expects the CSS import without having to edit the component? The component from the NPM package expects the style as global style, not a CSS module.
I have tried to import the style using require in the functional component instead but the css is still loaded globally.
Related
I have a several React projects where I import some UI-components from a private NPM-package.
This UI-components package is also built using React and styled with Tailwind 3.
The projects where I import the UI-components is using Tailwind 2 and Rollup. I have the abillity to change most of this if it would help.
The CSS of this UI-components package is imported in my projects index.ts file.
(I have access to this NPM package and can change to code there as well)
One of these components is a wrapper-component. That takes in a prop called classes.
import { Wrapper } from 'our-ui-package/components/wrapper';
<Wrapper classes="pt-[30px]">
<Some-children-here />
</Wrapper>
Here I want to be able to send inn Tailwind-classes like pt-3 or even better: send in arbitrary values like pt-[30px].
Now this does not work, as the CSS for the UI-component is created when the NPM-package is build.
Is there any way I can combine the CSS from the UI-components package, as well as add any extra CSS I want to generate by sending these props to the wrapper (or any other component I make that accepts classes as props)?
Appreciate any help. Thank you so much.
Summary:
Importing components that are styled with Tailwind from a NPM-package, and send inn extra Tailwind-classes as props to said compontents, hoping the styling would update.
This does not happen, as the CSS is generated in the NPM-package is already generated when the package is built.
Is it possible to have different CSS for Different React components.Currently am Using import "./css/name.css" to import local CSS but this same CSS is also being applied on another component even when i don't import this CSS for other Component.
If you want to use seperate css for every component you can create react app module.css feature
css module will help, or alternatively you can install styled-component via npm
I want to selectively use semantic-ui-css classes in my components. The problem is that I use PostCSS modules option which scopes locally all the class names for a specific component. When I use semantic-ui-react components, for example a button, it renders element button with classes ui button, but the included css gets scoped locally so instead of button i get button-min_ui__14RRq
I need to do one of two things:
Import Semantic-ui css without the classes being scoped locally
Make Semantic-ui components to use classes that are being scoped locally
For now I see that I have only one option:
import React from 'react';
import { Button } from 'semantic-ui-react'
import semantic from 'semantic-ui-css/components/button.min.css'
export default class Test extends React.Component {
render(){
return (
<Button className={[semantic.ui, semantic.button]}>Click Here</Button>
)
}
}
I'm explicitly stating what classes the button is to use. It works, but I have to do that for every element and it keeps the default classes. So I get ui button button-min_ui__14RRq button-min_button__Uio9b
Is there a way of doing this without it keeping the default classes?
I'm not sure I fully understand the question, but will give it a shot. Should you try excluding the semantic/global styles from PostCSS?
eg. If you are using webpack use 'exclude' in the loader definition.
(it's something we do in one of our the projects where I work)
Laura
you are having similar problem to me.
Making External Library(Semantic ui React) and CSS module work with webpack css-loader
From my understanding,you want to exclude semantic-ui-react-library styling from css module so that it work with your application. You can create multiple rules for css loader to resolve this.
Take a look at this Using Semantic UI With CSS Modules in Webpack
I always use css of a library not the components they provide, I write my own.
So install only semantic-ui-css. Now import like below in your react application.
import ReactDOM from 'react-dom'
import 'semantic-ui-css/semantic.min.css'
import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'))
How can I use reactstrap when CSS module is enable? it seem reactstrap is not working properly. I use to call css by className={classes.mycss} but then I follow instruction here https://reactstrap.github.io/ and still it didnt work. Also I imported the bootstrap css in my index.js. Any idea how to fix this?
index.js
import 'bootstrap/dist/css/bootstrap.css';
myComponent
import { Button } from 'reactstrap';
There are certain problems with this approach:
CSS Modules localises the classnames to the module it is imported in, so if you import boostrap css, you will have to repeat that in every module.
CSS Modules requires classnames that are in camel case, which the bootstrap version is not.
Bootstrap styles are not written to be localised to a language. They are often meant to be shared.
Even if we use packages like Bootstrap CSS Modules, Reactstrap depends on the global classnames and will not work.
The way to the solve this problem might be to add bootstrap as a global stylesheet file and use classNames instead of CSS Modules specific styleName.
You can do this by:
Adding a link tag to index.html file.
You can find the discussion here
I am working on react based nextjs app. Some npm packages are using external css import.
I am getting error like
Module parse failed, you may need an appropriate loader to handle this file type.
How can I support css import from external packages in my nextjs app. I have checked somewhere by making change in next.config.js, it works. But I am unable to find the proper one.It would be great if someone can help me around this.
For Global CSS
To add global css, inside the file pages/_app.js use import '../styles.css' or to import from node_modules, use something similar to import 'bootstrap/dist/css/bootstrap.css'
For Component Level CSS
Next.js supports CSS Modules using the [name].module.css file naming convention.
CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.
If you have a component called Button inside Button.js, create a file called Button.module.css for the css file. Then you can import it to the Button component by import styles from './Button.module.css'
Documentation
Old Answer
You can add the css file in head of nextjs.
import Head from 'next/head'
and in the render method, inside the return add a head tag similar to ordinary HTML, the head tag should be inside a div.
<div>
<Head>
<title>Test</title>
<link href="/static/master.css" rel="stylesheet" key="test"/>
</Head>
</div>
also the css should be in static folder. Add a key to the link tag to reuse the css in multiple pages. If the key is same across pages, then the next server won't reload the css, but instead will reuse the css file.
This way there is no need for any css packages either.
You first need to create a next.config.js file in root directory
Install next-css
npm i #zeit/next-css
in next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS()
Restart app
USAGE
import 'react-select/dist/react-select.css'
No need for dangerouslySetInnerHTML
import your external css file into the component. For example, react-select requires you to add their stylesheet in order to make its styles work. You can import their stylesheets using
import rsStyles from 'react-select/dist/react-select.css'
Inject style in your component using dangerouslySetInnerHTML at render method
render() {
return (
<div>
<style dangerouslySetInnerHTML={{ __html: rsStyles }} />
// rest of your component code
// where you can use the injected styles
</div>
);
}
inside _app.js you can do the following:
if (someCondition){
import('../styles/rtl.css');
}