将反应 styles 转换为 CSS

Question

I got assigned to convert all the styles in the javascript file into the CSS file without breaking the design. Below are the snippets from the react style that is needed to be converted into CSS and the CSS I have converted so far. When I choose to use the styles from the CSS file, the search field design breaks.

The design looks like this: Search Field From JS File

The design if I use the CSS styles: 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",
    },
  },
}));

I am trying to convert the code above from.js file into the CSS file. Mostly is doable but I have no idea how to convert

transition: theme.transitions.create("width"),
width: "100%",

My CSS approach

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

Is there a similar way to solve this in CSS or should I just redesign the search field?

Answer 1

This MUI demo uses transition: ${theme.transitions.create("width")} in its theme. If you inspect that element in Chrome, you will see that translated to pure CSS, theme.transitions.create("width") does this:

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

Source: https://next.material-ui.com/customization/transitions/