[英]Convert react styles into CSS
我被分配在不破坏设计的情况下将 javascript 文件中的所有 styles 转换为 CSS 文件。 下面是需要转换为 CSS 和 CSS 的 react 样式的片段。 当我选择使用 CSS 文件中的 styles 时,搜索字段设计中断。
设计如下:从 JS 文件中搜索字段
如果我使用 CSS styles 的设计:损坏的 CSS 搜索字段
import React from "react";
import "./all_broadcasts.css";
import { makeStyles, InputBase, fade } from "@material-ui/core";
import { Search } from "@material-ui/icons";
import Dropmenu from "./../../dropmenu/DropMenu";
import Card from "./card/card";
const useStyles = makeStyles((theme) => ({
search: {
position: "relative",
backgroundColor: fade(theme.palette.common.white, 0.45),
borderRadius: 15,
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.65),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: 228,
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(3),
width: "auto",
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
boxShadow: "inset 2px 2px 5px #d0d0d0, inset -2px -2px 5px #ffffff",
borderRadius: 12,
height: 21,
border: "1px solid #eeeeee",
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("md")]: {
width: "20ch",
},
},
}));
我正在尝试将上面的代码 from.js 文件转换为 CSS 文件。 大多数情况下是可行的,但我不知道如何转换
transition: theme.transitions.create("width"),
width: "100%",
我的 CSS 方法
.search {
background-color: rgb(255, 255, 255,0.2);
border-radius: 15;
margin-right: 16px;
margin-left: 0;
position: relative;
width: 228;
}
.search:hover {
background-color: rgb(255, 255, 255,0.6);
}
@media screen and (min-width: 600px) {
.search {
width: "auto";
}
}
.searchIcon {
padding-left: 16px;
padding-right: 16px;
height: 100%;
position: absolute;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.inputInput {
padding: 8px 8px 8px 0;
box-shadow: inset 2px 2px 5px #d0d0d0, inset -2px -2px 5px #ffffff;
border-radius: 12;
height: 21;
border: 1px solid #eeeeee;
padding-left: calc(1em + 32px);
transition: width 300ms cubic-bezier(0.4,0,0.2,1) 0ms;
transition-property: width;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0ms;
width: 100%;
}
@media screen and (min-width: 960px) {
.inputInput {
width: 33ch;
}
}
在 CSS 中是否有类似的方法来解决这个问题,或者我应该重新设计搜索字段?
这个 MUI 演示在其主题中使用transition: ${theme.transitions.create("width")}
。 如果您在 Chrome 中检查该元素,您会看到转换为纯 CSS, theme.transitions.create("width")
这样做:
.class-name{
transition: width 300ms cubic-bezier(0.4,0,0.2,1) 0ms;
transition-property: width;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0ms;
}
资料来源: https://next.material-ui.com/customization/transitions/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.