将 React 样式转换为 CSS

Question

我被分配在不破坏设计的情况下将 javascript 文件中的所有样式转换为 CSS 文件。下面是需要转换成 CSS 的 react 样式的 sn-ps 和我目前已经转换的 CSS。当我选择使用 CSS 文件中的样式时，搜索字段设计会中断。

设计如下： Search Field From JS File

如果我使用 CSS 样式的设计：Broken CSS Search Field

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",
    },
  },
}));

我正在尝试将上面的代码从 .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 中解决这个问题，还是我应该重新设计搜索字段？

Answer 1

This MUI demo 在其主题中使用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/