devmeetings-react-ts-fork
Search…
Styling
Styling your components:
Well, you can use CSS and CSS processors and then use them as you would if it was simple HTML:
1
#ready {
2
background-color: #123456;
3
display: flex;
4
justify-content: center;
5
}
6
7
#ready .container {
8
padding: 0 10px;
9
}
Copied!
1
const React = () => (
2
<div id='ready'>
3
<div className='container'/>
4
</div>
5
)
Copied!
CSS-in-JS
But there are more options and the most recent trend is CSS-in-JS. Styled-components is one of the options:
1
import styled from 'styled-components';
2
3
const Ready = styled.div` // or styled(View) in the case of React Native
4
background-color: '#123456';
5
display: flex,
6
justify-content: center,
7
`;
8
9
const Container = styled.div` // or styled(View) in the case of React Native
10
padding: 0 10px,
11
`;
12
13
const ReactOrReactNative = () => (
14
<Ready>
15
<Container/>
16
</Ready>
17
)
Copied!
Last modified 2yr ago
Copy link