css - 如何将媒体查询添加到样式组件中的非组件变量？

Question

我正在开发一个 React JS 元素，我在其中使用 styled-components 来设置网页样式。

我在元素中使用了 reactstrap 组件。我正在设计 reactstrap 的 Button 组件并尝试添加媒体查询。

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>

因为，在 ButtonX 组件中，我检查是否设置了 inline 然后添加 css 代码以及 css 的媒体查询。

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

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

如果内联为真，我将检查条件 2 次，然后添加 css 和媒体查询。

1) 以上是有效的，但我想在一个无效的条件下添加这两个查询。

2) 否则，我想知道如何在上面的 inline 变量中编写此媒体查询。

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

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

`;

我尝试了第二个，但它不起作用，因为我确定我们是否可以在变量中写入媒体查询。

Answer 1

在模板字符串中添加诸如媒体查询之类的内容时，您是在插入一个函数。正如您提供的 inline ，这些不能在普通模板文字中工作。

styled-components 提供了一个名为 css 的助手可用于插值函数。在您的情况下，可以使用:

import { css } from "styled-components";

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

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