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
Related
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 am facing a really nasty issue, I need to create a badge component that it'll be places over a custom component.
This is my first attempt to create something similar in React, with HTML is way easier because you work directly with the DOM.
In this case instead I need to create a badge that will highlight a new component/feature, when you click on it a popup get's open with a bit of text that'll explains what the component is about, aka it's functionality. Telling you this because I need to listen for onClick and it's not possible to use pseudo-elements.
The base idea
<BadgeComponent position="top left">
<CustomComponent />
</BadgeComponent>
Since I can't use a pseudo-element that'll inherit all the element CSS properties this is my thinking:
do not change the CustomComponent because each time could be different
the BadgeComponent is a wrapper that creates a div with position:relative (so I can position the badge wherever I want)
BadgeComponent needs to be display: inline-block otherwise it'll change the overall layout
I need to take the CustomComponent box-model properties, remove from it and apply them to the BadgeComponent. This mostly because margins are messing with the BadgeComponent size and position the badge itself will be trickyer
Basically I need to take the CSS properties of the DOM element rendered from the child component.
The approach
So I've been experimenting with some code before came here and my first attempt has been to dinamically pass a ref to the child component of BadgeComponent with this snippet:
{React.Children.map(this.props.children, (element, idx) => {
if (idx > 0) return; // don't care if it has more childrens, at least for now.
return React.cloneElement(element, { ref: this.newFeature });
})}
I also thought to take the CustomComponent as a prop of BadgeComponent, like so:
<BadgeComponent position="top left" target={ CustomComponent }>
But I didn't (yet) followed this path because I thought that at the end of the day this.props.target it's basically the same of this.props.children and didn't earn anything doing so. Am I right?
I know that in React we have ref to get a reference to the DOM created from a component but in this case is not applicable because I am not applying the ref to the component that renders an HTML, I am applying it to CustomComponent that gets cloned and it doesn't pass to the DOM.
From my experiment everything works fine if I pass an HTML element, in the experimental code I have a div.box that gets the badge in the position that I want but as soon as I pass the Button I got the following error: Window.getComputedStyle: Argument 1 does not implement interface Element.
I am using window.getComputedStyle to get the CSS properties I care about.
My research
I've been looking all around the web and I've seen a nice implementation that, unfortunately, just works with styled components or styled defined inline in <style>. I am looking to not use NPM packages as this one because firstly I believe that it is possible to implement without reach for an additional package and second actually I do not like much the way that the sticky/badge get's implemented (with all respect obviously).
I don't know where to look anymore, I am not an expert JS/React developer (been WP theme developer for 10 years) so probably there is some basic concept that I missunderstand?
I've read about findDOMNode (looks will be deprecated soon) and forwardRef in the React ecosystem but I do not think that's the way to go, am I wrong?
I do not want the copy/paste code, well if you're so gentle to fork the codesandbox and share the solution will be great but I am trying to learn here: there is a way to get a reference of the rendered HTML element from any component?
Thinking that this is the missing part, if I can reach the DOM my code is already working 😊
I have this problem:
I want the calendar icon to render a little smaller, inside the input and equidistant from the three borders.
I could achieve it by reducing the icon's padding and also its size, using CSS.
The problem is that I have no idea on how to target it.
This is the DateInput control by #atanasster for Grommet 2, the UI framework by HP.
It looks like this because I changed its size, my version is shallower than the original.
As these are styled-components I think there might be a way to style them, but I don't know how to target the component's children, its internal HTML nodes.
Repeatedly reading the docs for hours didn't help.
I'd appreciate very much some wisdom on styling, or the confirmation that what I want to do is not possible.
The example can be seen here: https://stackblitz.com/edit/dateinputstyled
Vuetify docs define the sheet as follows:
The v-sheet is designed to power other paper components within Vuetify. It is meant to be used as a low level component.
card according to docs is this:
The v-card component is a versatile component that can be used for anything from a panel to a static image.
To me (not JS person) they seem very similar. Are they interchangeable? When to use one but not the other? Can you illustrate with examples?
Your question to me sounds little bit like "What is a difference between html div and section tags?"
Do you get me? I it is semantic thing.
"Low level" components tells me that you can use v-sheet in v-card but you shouldn't do the opposite.
Like putting span in p is ok, but doing the other way is a wrong practice.
Hope that helps you ;-)
VSheet and VCard will look quite similar and is quite similar because like most other component from vuetify VCard is made from the VSheet base.
A good use case for using VSheet is for creating your own custom component. Say you not happy with the look and feel of VCard and you want to create your own variant you would use VSheet as your base.
v-card has slots for title, subtitle, text, and actions.
v-card uses v-sheet and adds these areas.
If you do not need those areas, use v-sheet, as v-card adds extra overhead with extra HTML content and CSS styling.
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.