remove styled-components

package.json

@@ -16,7 +16,6 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
-    "styled-components": "^6.0.7",
     "webextension-polyfill": "^0.10.0"
   },
   "scripts": {

src/config/i18n.js

@@ -302,8 +302,8 @@ export const I18N = {
     en: `Custom Style`,
   },
   diy_style_helper: {
-    zh: `遵循“styled-components”的语法`,
-    en: `Follow the syntax of "styled-components"`,
+    zh: `遵循“CSS”的语法`,
+    en: `Follow the syntax of "CSS"`,
   },
   setting: {
     zh: `设置`,

src/views/Content/index.js

@@ -13,9 +13,9 @@ import {
   TRANS_NEWLINE_LENGTH,
 } from "../../config";
 import { useTranslate } from "../../hooks/Translate";
-import styled from "styled-components";
+import { styled } from "@mui/material/styles";
 
-const LineSpan = styled.span`
+const LineSpan = styled("span")`
   opacity: 0.6;
   -webkit-opacity: 0.6;
   text-decoration-line: underline;
@@ -34,7 +34,7 @@ const LineSpan = styled.span`
   }
 `;
 
-const FuzzySpan = styled.span`
+const FuzzySpan = styled("span")`
   filter: blur(0.2em);
   -webkit-filter: blur(0.2em);
   &:hover {
@@ -43,12 +43,12 @@ const FuzzySpan = styled.span`
   }
 `;
 
-const HighlightSpan = styled.span`
+const HighlightSpan = styled("span")`
   color: #fff;
   background-color: ${(props) => props.$bgColor};
 `;
 
-const DiySpan = styled.span`
+const DiySpan = styled("span")`
   ${(props) => props.$diyStyle}
 `;