I am using scss in react.
I have two components that have <img className='logo' />
and both components have independent .scss files.
I want to customize the styles of two .logo (s) differently.
What should I do to make classnames unique when rendered?
you can use css-modules
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
React support is native, you can check-in documentation
just use different classnames for styling ex:homepage-logo , article-logo
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'm working on a project where I want to use scss with react.
The Problem
I'm using 3 global style files, and 1 separate scss file for each component, but they seem to apply styles that I didn't even import.
File structure
This is my doubt. Your Sass files are converted to CSS file and in react if you use CSS files imported as import './somecss.css', your styles will leak out to other components. That's why they introduced CSS modules. If you are using CSS modules, there is a difference how you apply it. It's not like how a regular CSS class/id is applied.
CSS Modules let you use the same CSS class name in different files
without worrying about naming clashes.
You can get more info from docs
I have index.css,style.css and index.js, header.js in my react code both CSS is applying to a single component how to block applying CSS
If i got you right, and you want to make sure that the both css's are not applying too the whole app, you should be more specific about your css rules. try to nest them, or use sass.
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