样式化组件/反应/语义/道具和计算
Styled Component/ React/ Semantic / Props and calc
您好,我有一个正常工作的菜单,我使用 属性 设置其大小打开和关闭以及移动分辨率。
但我试图对我的内容网格做同样的事情
我的第二列没有得到值我不知道它是否与计算有关:
代码:
<ContainerGrid style={{background: '#eee'}}>
{/* <ContainerGridColumn mobile={2} > */}
<ContainerGridColumnMenu status={open ? '12.5%' : '50px'} mobile= {open ? '31.25%' : '12.5%'} >
<div style={{background:'#000', width:'100%', height:'100%'}}>
</div>
</ContainerGridColumnMenu>
<ContainerContent desktop={open ? '87.5%' : 'calc(87.5%+50px)'} mobile = { open ? '68.75%' : '87.5%' }>
<Button icon onClick={handleClick}>
<Icon name="align justify" />
</Button>
</ContainerContent>
</ContainerGrid>
样式化:
import { Grid, Column } from 'semantic-ui-react';
import styled from 'styled-components';
import { device } from './device';
export const ContainerGrid = styled(Grid)`
background: #eee;
`;
export const ContainerGridColumnMenu = styled(Grid.Column)`
background: #e548;
width: ${props => props.status} !important;
padding: 0 !important;
height: 100vh;
@media only screen and (max-width: 767px) and (min-width: 320px) {
width: ${props => props.mobile} !important;
}
`;
export const ContainerContent = styled(Grid.Column)`
background: #e548;
width: ${props => props.desktop} !important;
padding: 0 !important;
height: 100vh;
@media only screen and (max-width: 767px) and (min-width: 320px) {
width: ${props => props.mobile} !important;
}
`;
css:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#root,
.App,
.ui.grid{
height: 100vh !important;
margin: 0 !important;
padding:0 !important;
}
基本上我的红色内容应该占据了网格的其余部分
但它没有发生我不知道为什么
编辑:
第一个错误是我使用了','而不是'. 'na 道具
很好,但是我在传递道具时遇到了一些问题:
'calc (87.5% + 50px)'
codesandbox 中的最佳视图:https://codesandbox.io/s/autumn-cache-0i402
你需要更新两个ContainerContent的宽度,除此之外一切都很完美,请参考这个例子link:codesandbox
App.js
import React, { useState } from "react";
import { Grid, Button, Icon } from "semantic-ui-react";
import "./style.css";
import {
ContainerGrid,
ContainerGridColumnMenu,
ContainerContent
} from "./styled";
export default function App() {
const [open, setOpen] = useState(true); // declare new state variable "open" with setter
const handleClick = e => {
e.preventDefault();
setOpen(!open);
};
return (
<ContainerGrid style={{ background: "#eee" }}>
{/* <ContainerGridColumn mobile={2} > */}
<ContainerGridColumnMenu
status={open ? "12.5%" : "calc(12.5% - 50px)"}
mobile={open ? "31.25%" : "12.5%"}
>
<div style={{ background: "#000", width: "100%", height: "100%" }} />
</ContainerGridColumnMenu>
<ContainerContent
desktop={open ? "87.5%" : "calc(87.5% + 50px)"}
mobile={open ? "68.75%" : "87.5%"}
>
<Button icon onClick={handleClick}>
<Icon name="align justify" />
</Button>
</ContainerContent>
</ContainerGrid>
);
}
您好,我有一个正常工作的菜单,我使用 属性 设置其大小打开和关闭以及移动分辨率。 但我试图对我的内容网格做同样的事情 我的第二列没有得到值我不知道它是否与计算有关:
代码:
<ContainerGrid style={{background: '#eee'}}>
{/* <ContainerGridColumn mobile={2} > */}
<ContainerGridColumnMenu status={open ? '12.5%' : '50px'} mobile= {open ? '31.25%' : '12.5%'} >
<div style={{background:'#000', width:'100%', height:'100%'}}>
</div>
</ContainerGridColumnMenu>
<ContainerContent desktop={open ? '87.5%' : 'calc(87.5%+50px)'} mobile = { open ? '68.75%' : '87.5%' }>
<Button icon onClick={handleClick}>
<Icon name="align justify" />
</Button>
</ContainerContent>
</ContainerGrid>
样式化:
import { Grid, Column } from 'semantic-ui-react';
import styled from 'styled-components';
import { device } from './device';
export const ContainerGrid = styled(Grid)`
background: #eee;
`;
export const ContainerGridColumnMenu = styled(Grid.Column)`
background: #e548;
width: ${props => props.status} !important;
padding: 0 !important;
height: 100vh;
@media only screen and (max-width: 767px) and (min-width: 320px) {
width: ${props => props.mobile} !important;
}
`;
export const ContainerContent = styled(Grid.Column)`
background: #e548;
width: ${props => props.desktop} !important;
padding: 0 !important;
height: 100vh;
@media only screen and (max-width: 767px) and (min-width: 320px) {
width: ${props => props.mobile} !important;
}
`;
css:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#root,
.App,
.ui.grid{
height: 100vh !important;
margin: 0 !important;
padding:0 !important;
}
基本上我的红色内容应该占据了网格的其余部分 但它没有发生我不知道为什么 编辑:
第一个错误是我使用了','而不是'. 'na 道具
很好,但是我在传递道具时遇到了一些问题: 'calc (87.5% + 50px)' codesandbox 中的最佳视图:https://codesandbox.io/s/autumn-cache-0i402
你需要更新两个ContainerContent的宽度,除此之外一切都很完美,请参考这个例子link:codesandbox
App.js
import React, { useState } from "react";
import { Grid, Button, Icon } from "semantic-ui-react";
import "./style.css";
import {
ContainerGrid,
ContainerGridColumnMenu,
ContainerContent
} from "./styled";
export default function App() {
const [open, setOpen] = useState(true); // declare new state variable "open" with setter
const handleClick = e => {
e.preventDefault();
setOpen(!open);
};
return (
<ContainerGrid style={{ background: "#eee" }}>
{/* <ContainerGridColumn mobile={2} > */}
<ContainerGridColumnMenu
status={open ? "12.5%" : "calc(12.5% - 50px)"}
mobile={open ? "31.25%" : "12.5%"}
>
<div style={{ background: "#000", width: "100%", height: "100%" }} />
</ContainerGridColumnMenu>
<ContainerContent
desktop={open ? "87.5%" : "calc(87.5% + 50px)"}
mobile={open ? "68.75%" : "87.5%"}
>
<Button icon onClick={handleClick}>
<Icon name="align justify" />
</Button>
</ContainerContent>
</ContainerGrid>
);
}