Почему срабатывает стиль для наименьшего разрешения (styled-components)?

Question

[Владимир Голубь]

Пытаюсь перенести сетку bootstrap на styled-components, но получаю проблему с разрешениями.

Почему-то при разрешении 1200 и выше срабатывает, стили для 576 ?

Порядок расположения стилей проблему не решает.

import React from 'react';
import styled from 'styled-components';

const Column = styled.div`
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
`;

const columnCount = 12;

const ColumnStyled = styled(Column)`    
    ${props => props.lg ?
        `
        @media (min-width: 1200px) {
            flex: 0 0 ${(100 / columnCount) * props.lg}%;
            max-width: ${(100 / columnCount) * props.lg}%;
        }
        ` 
        :
        ''
    }
    
    ${props => props.md ?
        `
        @media (min-width: 992px) {
            flex: 0 0 ${(100 / columnCount) * props.md}%;
            max-width: ${(100 / columnCount) * props.md}%;
        }
        ` 
        :
        ''
    }
    
    ${props => props.sm ?
    `
        @media (min-width: 768px) {
            flex: 0 0 ${(100 / columnCount) * props.sm}%;
            max-width: ${(100 / columnCount) * props.sm}%;
        }
        ` 
        :
        ''
    }
    
    ${props => props.xs ?
        `
        @media (min-width: 576px) {
            flex: 0 0 ${(100 / columnCount) * props.xs}%;
            max-width: ${(100 / columnCount) * props.xs}%;
        }
        `
        :
        ''
    }
`;

export default (props) => {
    return (
        <ColumnStyled xs={4} sm={4} md={4} lg={8}>
            { props.children }
        </ColumnStyled>
    )
}

Answer 1

[Владимир Голубь]

Для решения проблемы необходимо понять порядок правил и параметров в компоненте

import React from 'react';
import styled from 'styled-components';

const Column = styled.div`
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
`;

const columnCount = 12;

const ColumnStyled = styled(Column)`    
            
    ${props => props.xs ?
        `
        @media (min-width: 576px) {
            flex: 0 0 ${(100 / columnCount) * props.xs}%;
            max-width: ${(100 / columnCount) * props.xs}%;
        }
        `
        :
        ''
    }
    
    ${props => props.sm ?
    `
        @media (min-width: 768px) {
            flex: 0 0 ${(100 / columnCount) * props.sm}%;
            max-width: ${(100 / columnCount) * props.sm}%;
        }
        ` 
        :
        ''
    }
    
    ${props => props.md ?
    `
        @media (min-width: 992px) {
            flex: 0 0 ${(100 / columnCount) * props.md}%;
            max-width: ${(100 / columnCount) * props.md}%;
        }
        ` 
        :
        ''
    }
    
    ${props => props.lg ?
        `
        @media (min-width: 1200px) {
            flex: 0 0 ${(100 / columnCount) * props.lg}%;
            max-width: ${(100 / columnCount) * props.lg}%;
        }
        ` 
        :
        ''
    }
`;

export default (props) => {
    return (
        <ColumnStyled lg={8} md={4} sm={4} xs={4}>
            { props.children }
        </ColumnStyled>
    )
}

Answer 2

[i1yas]

Правила должны идти в другом порядке. Пример
Это как if, если ты используешь min-width, то надо перебирать разрешения по возрастанию.