Question

我正在一个React JS项目中，我正在使用styled-components来设置网页的样式。

我正在项目中使用reactstrap个组件。我正在设计Button的{{1}}组件的样式，并尝试添加媒体查询。

ButtonX组件

reactstrap

我正在这样编写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，然后添加CSS代码以及CSS的媒体查询。

inline

如果inline为true，我将检查条件2次，然后添加CSS和媒体查询。

1）上面的方法有效，但是我想在一个无效的条件下添加两个查询。

2）另外，我想知道如何像上面这样在${props => props.inline ? css`${inline}`: ''} ${props => props.inline ? (media.smalldevice` top: 4rem; right: 5rem; `) : ''}变量中编写此媒体查询。

inline

我尝试了第二种方法，但由于无法确定是否可以在变量中编写媒体查询，因此无法正常工作。

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;
    `}
`;

如何在样式化组件中向非组件变量添加媒体查询？

1 个答案: