css - 如何在 typescript 中使用 css 对象自定义 React-Bootstrap 样式

Question

我在我的项目中使用 Typescript 中的 React-Bootstrap。我尝试使用传递给样式属性的 css 对象文件来自定义样式，但它不能支持很多东西。我的代码如下：

import "./SideBar2.css";
import { Link } from "react-router-dom";
import {
  PersonCircle,
  HouseDoor,
  Wallet2,
  CashStack,
  Gear,
  BoxArrowRight,
  Mailbox2,
} from "react-bootstrap-icons";

interface Props {
  width: string;
  goto: (url: string) => void;
}


const myStyle = 
  {
    marginTop: "0.8em",
    padding: "0 0.8em",
    overflowY: "scroll",
    overflowX: "hidden",

    "&::-webkit-scrollbar": {
      width: "10px",
      height: " 100%",
      borderRadius: "30px",
    },

    "&::-webkit-scrollbar-track ": {
      height: " 100%",
      borderRadius: "30px",
      background: "transparent"
    },

    "&::-webkit-scrollbar-thumb ": {
      borderRadius: "30px",
      background: "linear-gradient(rgb(39, 181, 216), rgb(25, 40, 68))",
    },
};

const SideBar2 = (props: Props) => {
  return (
    <div className="sidebar__ctrl" style={{ width: `${props.width}` }}>
      {/* <div className="sidebar__item"> */}
        <div style={myStyle}>
        <ul className="main-menu-ul">
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action" onClick={() => props.goto("/")}>
              <HouseDoor size={25} />
              <small>Home</small>
            </a>
          </li>
          <li>
            <a
              className="sidebar_action"
              onClick={() => props.goto("/account")}
            >
              <Wallet2 size={25} />
              <small>Account</small>
            </a>
          </li>
          <li>
            <a
              className="sidebar_action"
              onClick={() => props.goto("/payment")}
            >
              <CashStack size={25} />
              <small>Payments</small>
            </a>
          </li>
          <li>
            <a
              className="sidebar_action"
              onClick={() => props.goto("/fund-transfer")}
            >
              <Mailbox2 size={25} />
              <small>Transfer</small>
            </a>
          </li>
          <li>
            <a
              className="sidebar_action"
              onClick={() => props.goto("/service-config")}
            >
              <Gear size={25} />
              <small>Services</small>
            </a>
          </li>
          <li>
            <a className="sidebar_action">
              <BoxArrowRight size={25} />
              <small>Logout</small>
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default SideBar2;

在这里，我试图将 myStyleobject 传递给上面突出显示的样式属性，它会引发如下错误：[错误消息] [1] [1]：https://i.stack.imgur.com/IYOLS.png

它的节目甚至像marginTop这样简单的东西都不接受。在这里，我想将我定义的所有样式作为对象添加到样式属性中。

我被困在这里有人可以帮助我吗？

标签： cssreactjstypescriptreact-bootstrap