I started rewriting CSS into React Components but i've encountered a problem, I do know how to do this (using styled-components btw ) :
-
Styled component is prop based. You can pass title and description as boolean props.gadi tzkhori– gadi tzkhori2020-01-11 20:33:23 +00:00Commented Jan 11, 2020 at 20:33
-
Can u gimme some link with an example please?Mr Robot– Mr Robot2020-01-11 20:48:19 +00:00Commented Jan 11, 2020 at 20:48
-
Welcome to Stack Overflow. The Styled Components web site has an intro page for you to look at. styled-components.com/docs/basics#getting-started particularly the section on "Pseudoelements, pseudoselectors, and nesting"Mikkel– Mikkel2020-01-11 21:00:34 +00:00Commented Jan 11, 2020 at 21:00
Add a comment
|
2 Answers
You have 5 ways to styling component in React.
Every approach have pros & cons(personally I use 4-th ways.)
1.Inline Css
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
2. CSS in JS
const Button = (props) => (
<button className={ 'large' in props && 'large' }>
{ props.children }
<style jsx>{`
button {
padding: 20px;
background: #eee;
color: #999
}
.large {
padding: 50px
}
`}</style>
</button>
)
/* Creates a regular button */
<Button>Hi</Button>
/* Creates a large button */
<Button large>Big</Button>
3. Styled Components
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);
4. Css Modules (scss || sass)
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
5. Stylable - https://github.com/wix/stylable
Comments
import React from 'react';
import styled, {css} from 'styled-components';
const Info = styled.div`
display: flex;
// etc.
${props => props.title && css`font-size: 15px`}
`
const Box = styled.div`
&:first-of-type {
// some more css
}
`
// usage
<Info title>some info</Info>
I recommend you follow the official docs as stated in comments by @Mikkel
