how can i style same type of elements but diffrent ones with diffrent css properties in styled components ?
for example
<div></div>
<div></div>
with knowledge i have i can do
export const StyledDiv = styled.div`
color:red;
`
and change <div></div> to <StyledDiv></StyledDiv>
but what if I want to change each of these divs with different styles? for example, I want one of them to have the color blue one and of them to have the color red
and these 2 elements are just for example to show you the meaning
now imagine a page with 10s of divs each with different style
What's the best way to deal with them?
You can simply pass props to the styled component like so:
const StyledDiv = styled.div`
color: ${props => props.color};
`;
And in your component:
return <StyledDiv color="red">...</div>;
Related
I'm trying to style a component like this:
function _MenuItem({label, icon}){
return <div>
{icon}
<p>{label}</p>
</div>
}
export const MenuItem = styled(props => <_MenuItem {...props} />)`
color: red;
p{color: red}
*{color: red}
`
The component is rendering, but the styles are not being applied.
I have managed to apply the styles by making a styled div and creating the component from that div, but I was wondering if there is a way to apply the styles directly to the component?
I am very new with react and more with styled-components so I assume that I have misunderstood some basic concepts.
Making a styled div is the correct way of doing things. I couldn't find anything on styling a component directly nor felt the urge to done it before.
Even when the styled-component docs describe how to style any component, they are basically styling an element just with a different syntax.
There doesn't seem to be a good enough reason to do what you want to do, since you can achieve what you want to achieve by using the styled components as intended.
The following way of doing things works and it is super simple:
import styled from "styled-components"
const _MenuItem = ({label, icon}) => {
return <Root>
{icon}
<p>{label}</p>
</Root>
}
const Root = styled.div`
color: red;
p{color: red}
*{color: red}
`
export default _MenuItem;
Please let me know if I'm missing some specific use-case or something other.
Why should I use styled-components if having a className against an element does the work of styling?
Applied style :
h2.subTitle{
font-size: 2em;
color: blue;
}
Element to be styled using className :
<h2 className="subTitle">Gucci Snakes </h2>
Using styled component :
import styled from 'styled-components';
const Subtitle = styled.h2`
font-size: 2em;
color: blue;
`;
<Subtitle>Gucci Snakes</Subtitle>
From the docs,
styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
This helps with regards to class/style name collision.
https://styled-components.com/docs/basics#motivation
It's used because of readability, classNames might work well, but you don't love them that much when you have 1 or 2 css files with 500 rows, also, the structure of styled components is similar to sass.
For more examples and info you can click here , here and here
I want to smoothly resize a DIV with onClick event. But transition doesn't work. onClick just changes the style without animation.
App.js
import React, { useState } from 'react'
import './App.scss';
function App() {
const [clicked, setClicked] = useState(-1)
return (
<div
className={clicked === -1 ? "app" : "app__clicked"}
onClick={() => setClicked(0)}>
div clicked {clicked}
</div>
);
}
export default App;
App.scss
.app {
background-color: red;
transition: width 3s;
&__clicked {
background-color: blue;
width: 100px;
}
}
I think I'm doing something wrong with SCSS.
As can be seen here, your SASS rules will result in two different css classes which you toggle between when assigning a className prop to your div.
The second class is app__clicked and it has no transition property which is why the transition doesn't work. It also doesn't work because, as indicated in the comments, you don't have an initial width on the div, so there is nothing to transition between. By moving the transition property to the app_clicked class and setting width to 100% in the initial state, you will have a working example.
As an advice when doing transitions manually, use a base class which has the transition property set and then toggle the other state by means of other classes (or inline with style) to make sure that the element always has the transition property set. Like this:
<div className={ `app ${clicked === -1 ? "before" : "after"}`}>
div clicked {clicked}
</div>
or
<div className={ "app" } style={{"width": clicked === -1 ? "100%" : "100px"}}>
div clicked {clicked}
</div>
Finally, you might wanna have a look at react-transition-group where transitions with React components is shown. However, you might think that this brings nothing new to the table and that it is too verbose. But it's good to know about and it might have its use cases.
Here is a sandbox with all of the above examples and an example with the CSSTransition component from react-transition-group: Sandbox
I can set styles in the style options object for stripe
var elementStyles = {
base: {
textAlign: 'center',
fontWeight: 400,
fontSize: '12px',
color: '#333'
}
};
var stripe = stripeElements.elements();
cardNumberStripeElement = stripe.create('cardNumber', {
styles: elementStyles
});
But I want to transfer styles to css.
This example does not apply my styles, only those that apply to the container
var elementClasses = {
base: 'card-info-base'
};
var stripe = stripeElements.elements();
cardNumberStripeElement = stripe.create('cardNumber', {
classes: elementClasses
});
in css
.card-info-base {
text-align: center "does not work";
font-weight: 400 "does not work";
font-size: 12px "does not work";
height: 100px "works"
}
How do i transfer styles to css?
That's a good question. Unfortunately, it's not possible to apply those styles to the card element in the way you're thinking. The reason is that the card input is embedded within an iframe and styles don't cascade from a parent window down into iframes.
When you add a class to the classes option, the class gets added to the element that you mounting the card in. For example, this is roughly what the DOM would look like once the element has mounted in your case:
<div id="card-element" class="card-info-input StripeElement--empty">
<div class="__PrivateStripeElement">
<iframe src="https://js.stripe.com/v3/">
#document
<input class="InputElement">
</iframe>
</div>
</div>
As you can see, any styles that are applied by card-info-input wouldn't make their way down to the actual input because its in an iframe.
This is different when you use the style option [0]. When you add a custom style using the style option that style is automatically added to the InputElement class when the card mounts. In a way, styles added through the style option are injected into the iframe by Stripe.js - this is why they work the way you expect.
TLDR;
If you want to apply styles to the input inside the iframe use the style option [0]. If you want to apply styles to card's parent element you can use the classes option [1] - this is especially useful if you want to apply different styles depending on the state of the input (focused, invalid, etc.)
[0] https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style
[1] https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-classes
I'm using react-color as my color picker. console.log('Current color:', this.state.color); outputs color in rgba value. So what I want to achieve is changing component colors with a color picker value. Really amateurish I know, what I tried so far was adding classes to divs and with React Helmet:
export class Intro extends React.Component {
render() {
return (
<Style>
{
.intro:hover {
background-color: red;
}
}
</Style>
)
}
}
This wrote it perfectly fine inside </head> tags. And all elements with that class changed the color. When I tried to use this state inside the bracket, it rendered as a raw text color={ this.state.color } inside the style tags. This is the closest workaround I've got. I had no luck setting inline styles into an existing component.
Thanks in advance!
Check out the first option in this article. I think you're mixing terminology. export class is not a css class, that's a javascript ES6 class. CSS goes inside an object and can be passed inline to a DOM element. If you want to use the :hover selector, you'll have to assign a className to the element you are wanting to apply this to and import a css file. This is the example I have below.
file.css
.intro:hover {
background-color: red;
}
file.jsx
export class Intro extends React.Component {
render() {
return (
<div className="intro">some contents</div>
)
}
}