Как добавить медиа-запрос к некомпонентной переменной в стилизованных компонентах? - PullRequest
Новая
       26

Как добавить медиа-запрос к некомпонентной переменной в стилизованных компонентах?

0 голосов
/ 27 декабря 2018

Я работаю над проектом React JS, в котором я использую styled-components для оформления веб-страниц.

Я использую reactstrap компоненты в проекте.Я стилизирую Button компонент reactstrap и пытаюсь добавить медиа-запрос.

Компонент ButtonX 

import styled, {css} from 'styled-components';
import { Button } from 'reactstrap';
import media from '../media';


const orange = `
    background-color: #E4572E;
    border: 1px solid #E4572E;
    color: #fff;

    &:hover,
    &:focus {
        background-color: #e97857;
        border: 1px solid #e97857;
        color: #fff;
    }
`;

const inline = `
    position: absolute;
    top: 1rem;
    right: 1rem;
`;

const ButtonX = styled(Button)`
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    font-size: 0.8rem;
    transition: all 0.4s linear;
    border-radius: 0.2rem;

    ${props => props.orange ? css`${orange}` : ''};
    ${props => props.inline ? css`${inline}`: ''}

    ${props => props.inline ? 
        (media.smalldevice`
            top: 4rem;
            right: 5rem;
        `)
        : ''}
`;

export {
    ButtonX
}

Я пишу компонент ButtonX следующим образом 

<ButtonX orange="true" inline="true">Sign Up</ButtonX>

As, В компоненте ButtonXЯ проверяю, установлена ​​ли inline, затем добавьте код css и медиа-запрос для css. 

${props => props.inline ? css`${inline}`: ''}

        ${props => props.inline ? 
            (media.smalldevice`
                top: 4rem;
                right: 5rem;
            `)
            : ''}

Я проверяю условие 2 раза, если inline имеет значение true, затем добавьте css и медиа-запрос.

1) Вышеописанное работает, но я хочу добавить оба запроса в одно условие, которое не работает.

2) Иначе, я хотел бы знать, как я могу написать этоМедиа-запрос в приведенной выше переменной inline выглядит следующим образом. 

const inline = `
    position: absolute;
    top: 1rem;
    right: 1rem;

    ${
        media.smalldevice`
            top: 4rem;
            right: 5rem;
        `
    }

`;

Я попробовал второй, но он не работает, так как я уверен, что мы можем написать медиа-запрос в переменной.

1 Ответ

0 голосов
/ 27 декабря 2018

Когда вы добавляете что-то вроде медиа-запроса в строку шаблона, вы интерполируете функцию.Они не могут работать внутри обычных литералов шаблона, поскольку вы предоставили inline с.

styled-components предоставляет помощника с именем css, который можно использовать для интерполяции функций.В вашем случае это может быть использовано: 

import { css } from "styled-components";

const inline = css`
    position: absolute;
    top: 1rem;
    right: 1rem;

    ${media.smalldevice`
        top: 4rem;
        right: 5rem;
    `}
`;
...