enter image description hereI am using React, Typescript and Styled components. Everything looks fine but I am seeing multiple styles tag under my head tag. I would like to know why it is creating multiple styles tag and is there any way to combine all styletags into one.
For example , I am creating a dropdown in a loop and it has 3 values and it generates 3 style tag under my head tag
Thanks all
From what I understand, I believe this is expected behavior assuming you're utilizing style partials for each component. React (and other front end frameworks like Angular) is importing the styles that apply to the current view. It does this by importing them individually as the page renders different views.
This isn't always ideal, though. I often create CSS partials in a global styles folder if I want to share styles across components. The only styles I put in the component specific CSS file are styles that are 100% specific to that component and I don't ever want to share.
You could also always create a shared CSS file that you import once - ie - dropdown.css (or .scss etc if you're using a pre-processor) and delete the react component specific CSS files that you will be replacing with this new global version. The downside being that whatever CSS you have in there will always be imported even if the dropdown isn't being rendered or viewed.
Related
As my first React Project, I want to create a DatePicker component and I would like to use CSS Modules.
However, CSS Modules generates a unique class and I would like to know if it is possible for the user to customize a nested component for example ?
What is a nested component in this case? CSS modules will encapsulate your styles, you can still write any kind of valid CSS in that file..
I am building a website using React.
I am using Router from 'react-router-dom' to navigate between pages (urls).
Everything seems to work ok, but if I navigate between pages the layout style sometimes changes. For instance, the workouts page layout seems good and as I want, however, if I navigate from there to Gallery page and back, it looks different. Same goes for other pages.
I am adding a link to my Github page (the updated code is under 'main' branch). Also, you'll find beneath two pictures that demonstrate the different layout of the Workout page.
My Github repository Link.
Notice that sometimes it doesn't change the style, perhaps you will need to register, login, and logout.
Any Help will be appreciated!!
From peeking at your repo, my first guess would be that the problem is your css classes aren't scoped and are overruling each other when you render different components. When you import a css file like you do, it applies the rules globally, so depending on the order of the components you render, the rules are applied to all components in a different order. What you should do is:
Change your CSS file names to include module , for example Workouts.css should be become Workouts.module.css
Make your CSS imports act like a module, for example import styles from '../css/Workouts.module.css'
Change all your classes in the component to be from styles, for example replace <div className="row"> with <div className={styles.row}>
This way, if you have more than one component with the same class name, the rules of the class apply only to this specific component (i.e. scoped css)
That's my guess
I am try to add some CSS to my components. However, when the website renders the custom CSS is always removed. I am styling my own pages and do not override the CSS of third parties, at least not consciously. I am using Material UI and NextJS and realised that while following this
that all server-side CSS is removed. I suspect that this is the issue, but not sure how to work around it. The CSS is just custom to the component and follows the naming convention of Next :
[filename].modules.css
Does anyone know what do do?
I am building a Gatsby site. The site consists of multiple React "page-components", all of which get wrapped in a React header component and a React footer component.
I have some pre-existing static HTML (think things like Privacy Policy &c). I was planning to just publish them in the /public gatsby folder. But then the won't have the React header component and footer component.
How can I publish my static HTML content AND give them the React header/footer?
I imagine that if I "translate" my static HTML to JSX then of course that would work. Just want to understand if that is the only way, the right way, or whether there is an easier way?
You can add the header/footer components into src/layouts/index.js while the page content will be rendered through the <div>{children()}</div> based on the pages you add to src/pages
Gatsby will create the static public files for you at build time (I recommend Netlify). You 'should' be creating react components which means using JSX, either in the pages folder or the components folder. The header is actually already part of the layouts folder so you don't have to do anything on that count.
Based on what I am understanding, if you just create new page files or modify the existing page files to display your content you will get the behaviour you're after. Then it's just a matter of customizing things i.e. the pages and the header content and styles, to your liking.
React with CSS Module is very delightful, anyway, I have a page on which I want to represent exactly the same components except styling, I do not know how to do this with CSS Module.
In a traditional way, I would like to use different css file links in the "head" on each page, but CSS Modules is bound within it is own component by importing styles, seems there is no way to overwrite it without ruin the other page.
Of course, I can just copy all components and paste in another folder, and import them there, re-write the css files, but a full copies of component seems silly, what if I want to modify any component in these components? then I have to modify all copies.
Is there a graceful way to do this?
Thank you.