As I delve into the world of styled-components, I decided to create this component:
import React from 'react'
import styled from 'styled-components'
const Row = styled.div`
`
const Column = styled.div`
flex: 0 0 50%;
max-width: 50%;
`
export default () => {
return (
<div className="container-fluid">
<div className="row">
<Column>50%</Column>
<Column>50%</Column>
</div>
<div className="row">
<div className="col-sm-6">50%</div>
<div className="col-sm-6">50%</div>
</div>
</div>
)
}
The first row showcases a styled component, while the second row lacks styling but includes the same CSS rule within a media query. Surprisingly, the layouts differ:
@media (min-width: 576px)
.col-sm-6 {
-ms-flex: 0 0 50%;
flex: 0 0 61%;
max-width: 50%;
}