样式化组件/反应/语义/道具和计算答案

【问题标题】：Styled Component/ React/ Semantic / Props and calc样式化组件/反应/语义/道具和计算
【发布时间】：2020-04-26 07:58:35
【问题描述】：

您好，我有一个正常工作的菜单，我使用该属性来设置其大小打开和关闭以及移动分辨率。但我试图对我的内容网格做同样的事情我的第二列并没有得到值我不知道它是否与计算有关：

代码：

    <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道具

很好，但是当我传递我的道具时我遇到了一些问题： '计算（87.5% + 50px）' 代码沙盒中的最佳视图：https://codesandbox.io/s/autumn-cache-0i402

【问题讨论】：

请看这个：codesandbox.io/s/sleepy-mendeleev-lc90x
是的，谢谢兄弟，我使用了错误的计算方法 kkk 87.5% + 50px 我最终将所有内容都放入了%
谢谢，让我在这里分享帖子。
是的，谢谢你能帮我一个按钮吗？出于某种原因，我认为这是我的菜单正常打开时的语义 css 设置，但是当我关闭按钮时它不在我的容器中，我几乎放弃使用大部分语义 css
stackoverflow.com/questions/59662589/…

标签： css reactjs styled-components

【解决方案1】：

你需要更新两个ContainerContent的宽度，除此之外一切都很完美，请参考这个示例链接：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>
  );
}

【讨论】：