I just started with React and have a simple question I couldn't find anywhere.
So, should every React component have it's own stylesheet?
For example if I have my main App component which I render to the browser should I just include a css file there and have all my styles in that or is it bettet to have an own css file for every component?
Thanks.
CSS best practices in React are still heavily debated. There are pros and cons to each variation.
What you are probably looking for is modularity in your CSS. While having unique style sheets for your components does accomplish this to some degree I suggest taking a look at CSS modules. Packages like this can keep your CSS contained to a specific component so you don't over-write styles on other components.
Personally, I've done a little bit of both. I use a base style sheet (bootstrap for example). Then I use CSS-modules to help me make components that are unique that I might want to easily port over to other projects.
Related
I want to create a UI Component Library where consumers can bundle only the styles for the components they are actually using.
Let's say this question is framework-agnostic since I am more interested to evaluate existing approaches.
The idea would be for a user to be able to
import { Button } from '#mylib/ui`
and not being required to go to their main.ts and add
import '#mylib/ui/styles/main.min.css`
Now, obviously, the first solution is to avoid bundling the CSS together, so a user would be able to import separate stylesheet for each component
import '#mylib/ui/styles/button.min.css';
import '#mylib/ui/styles/accordion.min.css';
Now, this approach works well if you use a handful of components and want to keep the bundle size in check, but it doesn't scale if a consumer starts using dozen of components.
How can I overcome that challenge?
The only approach I can think of is inline styling, which won't work because of missing selectors, media queries, etc.
What I would love to achieve, is a way for consumer to declare what they need, and get the styles for that component without any additional configuration/import, while preserving the ability of only bundle the CSS that belongs to the components that are imported
import { Button } from '#mylib/ui`
I am scratching my head to come up with an idea of how this would work...
I am currently using an HTML template and am trying to return those as react components, however when I run the HTML code natively the page looks like this.
However, running the same code being returned by a react component, it is almost as if the components are only taking up half the page. Some of the elements such as the text of the name and collar have been changed but I haven't touched any of the DOM elements so I don't know why the proportions are not correctly outputted. Any advice on how I can combat this issue?
Here are some suggestions:
Check your css.
You have some styling overrides on your react side. Those styles are overriding the ones defined on the html template that you are trying to render. Look for any styling your react app is doing on list items.
Its not exactly a good idea, returning a whole html template from the react component. Since we don't know your use-case, can't give any advice on this.
Try a react component library, if you want to create a similar page using pure react components. Will be a more sensible approach.
I'm looking to find best practices for providing developers the ability to style elements that exist within my React shared component.
For instance, I have a drop down and I wanted the developers to be able to select a predefined theme that would enable then to select a highlight color, font size, font family for the list element that exists within my drop down component. I created enums for the each of the default themes and provided a way to allow devs to define the theme object and add css to the properties that sat behind that enum. I then injected the style into the functional component.
However, I quickly realized that if I didn't provide a way for the developer to lets say adjust a facet of an element outside of the scope of the theme interface such as the font weight, the developer would not be able to style it and i'd have to go in and add it in and test that it works with all the other style combinations which became tedious and a lot of overhead.
I was wondering if there is an implementation whereby I provide refs to the elements in the component and provide and open-ended CSSProperties style prop that would allow the dev to style to their hearts content? Is there a best practice to do this? Please provide a short example if possible?
One caveat is that frameworks such as Next JS will encode the css modules and make it difficult to allow the user to provide css that'll manipulate the component due to the css element encoding or appended id's. This is why I thought the refs approach might work.
The best solution for you would be using :part . This allows styling through the shadow dom boundary of the parts of your component that you want.
See:
mozilla documentation
an explanation by the person who proposed this: explainer
and some other documentation
I'm building an advanced, full-page WYSIWYG tool using Vue. For this, I need to dynamically render a CSS stylesheet based on JSON blobs that contain CSS properties into the <head> of a page.
What is the most performant way to do this? Vue uses the concept of scoped CSS, which is compiled at build time. It doesn't allow runtime modification. What I need is the ability to modify, compile and render the CSS at runtime.
Current solution
I currently have a regular Vue component, in which I use a reducer to transform the JavaScript into a CSS string, which is rendered inside a <style> tag.
However, this entire string gets re-rendered on every single CSS change. This is not performant enough for my use case.
Desired solution
A solution that would render my CSS rules without relying on a single Vue component, so that it's picked up by Vue's Virtual DOM and benefits from its performance.
Now that I'm writing this, I think it might be a solution to render a Vue component for every single CSS class, but I'm not sure if that would work. I'm curious to hear other perspectives to this problem.
I've been loving checking out styled-components, but getting a bit stuck with the concept of extracting everything out into a component, and how to tweak styles for a particular use case. For example:
<Flex>
<MyStyledTitle>Hello I am a Title</MyStyledTitle>
<MyStyledBodyText>blah</MyStyledBodyText>
</Flex>
Let's say that I wanted to make the following customisations for this use case:
styled title grey (subdued text colour),
the body text to have a right margin of 100px (don't ask why).
The styled-components way, the first part could be done like:
<MyStyledTitle colorTint='subdued' />
or even
<MyStyledTitle>
<SubduedText>MyTitle</SubduedText>
</MyStyledTitle>
Perhaps using a prop for title that lets you configure it to use subdued text or ANOTHER hild component that defines the grey text..
But what about for the second option...
<MyStyledBodyText style={{paddingRight: 100}} />
Inline style? Use a Grid or layout component around it?
At which point does something become a specific styled-component and if not, then how does one customise smaller style changes?
While i really like this idea of removing the mapping between component + class name, I guess i'm feeling a bit torn between the classical idea of having a 'style sheet' file that can contain all the classes and modifier css, then using a presenter to choose between the combinations of css classes.
I might be missing something here, but just keen to see some bigger examples of styled components in practice. Any links / tips would be greatly appreciated!
We've been using styled-components in our project extensively. Few basic patterns/conventions we use are
Components created using StyledComponents are not used across React Components. Under extreme scenarios, we pull them into external files and export.
DIV is the most extensively used styled-component (styled.div). (Ofcourse we do use other html elements like button, table td etc., but styled explicitly).
Different styles for the same HTML element (or) React Component are declared explicitly as different styles. (If you refer to FAQ section of the styled-components docs, you might notice these - https://github.com/styled-components/styled-components/blob/master/docs/faq.md)
Overall to answer your question, we have moved away from the classical stylesheet and as well thinking about combining multiple styles. It has worked well, except that looking up on unit tests is a bit painful.
Thanks