{"id":256087,"date":"2022-11-09T08:45:20","date_gmt":"2022-11-09T00:45:20","guid":{"rendered":"https:\/\/lrxjmw.cn\/?p=256087"},"modified":"2022-10-28T12:45:57","modified_gmt":"2022-10-28T04:45:57","slug":"react-linu-six","status":"publish","type":"post","link":"https:\/\/lrxjmw.cn\/react-linu-six.html","title":{"rendered":"React\u53ef\u5b9a\u5236\u9ed1\u6697\u6a21\u5f0f\u5207\u6362\u5f00\u5173\u7ec4\u4ef6\u793a\u4f8b"},"content":{"rendered":"<table>\n<tbody>\n<tr>\n<td style=\"padding: 5px 12px; width: 25px; font-size: 22px; text-align: center; background: #E8E8E8; line-height: 30px; color: #999;\">\u5bfc\u8bfb<\/td>\n<td style=\"padding: 10px 10px 12px; line-height: 20px;\"><strong>\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u4ecb\u7ecd\u4e86React\u53ef\u5b9a\u5236\u9ed1\u6697\u6a21\u5f0f\u5207\u6362\u5f00\u5173\u7ec4\u4ef6\u793a\u4f8b\u8be6\u89e3\uff0c\u6709\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u501f\u9274\u53c2\u8003\u4e0b\uff0c\u5e0c\u671b\u80fd\u591f\u6709\u6240\u5e2e\u52a9\uff0c\u795d\u5927\u5bb6\u591a\u591a\u8fdb\u6b65\uff0c\u65e9\u65e5\u5347\u804c\u52a0\u85aa<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div   id="j6sjwn9j3u"    style=\"font-size: 14pt; color: white; background-color: black; border-left: red 10px solid; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;\"><strong>\u6b63\u6587<\/strong><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lrxjmw.cn\/wp-content\/uploads\/2022\/10\/20221025083737037.jpg\" alt=\"\" width=\"656\" height=\"457\" class=\"aligncenter size-full wp-image-256096\" srcset=\"https:\/\/lrxjmw.cn\/wp-content\/uploads\/2022\/10\/20221025083737037.jpg 656w, https:\/\/lrxjmw.cn\/wp-content\/uploads\/2022\/10\/20221025083737037-300x209.jpg 300w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/p>\n<p>\u4e00\u4e2a\u7528\u4e8eReact\u7684\u53ef\u5b9a\u5236\u7684\u9ed1\u6697\u6a21\u5f0f\u5207\u6362\u5f00\u5173\u7ec4\u4ef6\u3002<\/p>\n<div   id="j6sjwn9j3u"    style=\"font-size: 14pt; color: white; background-color: black; border-left: red 10px solid; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;\"><strong>\u5982\u4f55\u4f7f\u7528\u5b83\u3002<\/strong><\/div>\n<div   id="j6sjwn9j3u"    style=\"margin-top:2em;margin-bottom:1em\"><span style=\"color:#1E1E1E;letter-spacing: 2px;border-left:#FF3030 3px solid;border-right:#FF3030 3px solid;padding-left: 8px;padding-right:8px;font-size: 12pt\"><strong>1.\u5b89\u88c5\u548c\u4e0b\u8f7d<\/strong><\/span><\/div>\n<pre>npm install @anatoliygatt\/dark-mode-toggle @emotion\/react @emotion\/styled<\/pre>\n<div   id="j6sjwn9j3u"    style=\"margin-top:2em;margin-bottom:1em\"><span style=\"color:#1E1E1E;letter-spacing: 2px;border-left:#FF3030 3px solid;border-right:#FF3030 3px solid;padding-left: 8px;padding-right:8px;font-size: 12pt\"><strong>2.\u5bfc\u5165DarkModeToggle\u7ec4\u4ef6<\/strong><\/span><\/div>\n<pre>import { useState } from 'react';\r\nimport { DarkModeToggle } from '@anatoliygatt\/dark-mode-toggle';<\/pre>\n<div   id="j6sjwn9j3u"    style=\"margin-top:2em;margin-bottom:1em\"><span style=\"color:#1E1E1E;letter-spacing: 2px;border-left:#FF3030 3px solid;border-right:#FF3030 3px solid;padding-left: 8px;padding-right:8px;font-size: 12pt\"><strong>3.\u5c06\u9ed1\u6697\u6a21\u5f0f\u5207\u6362\u6dfb\u52a0\u5230\u5e94\u7528\u7a0b\u5e8f\u4e2d<\/strong><\/span><\/div>\n<pre>function Example() {\r\n  const [mode, setMode] = useState('dark');\r\n  return (\r\n    <darkmodetoggle\r\n      mode={mode}\r\n      dark=\"Dark\"\r\n      light=\"Light\"\r\n      size=\"lg\"\r\n      inactiveTrackColor=\"#e2e8f0\"\r\n      inactiveTrackColorOnHover=\"#f8fafc\"\r\n      inactiveTrackColorOnActive=\"#cbd5e1\"\r\n      activeTrackColor=\"#334155\"\r\n      activeTrackColorOnHover=\"#1e293b\"\r\n      activeTrackColorOnActive=\"#0f172a\"\r\n      inactiveThumbColor=\"#1e293b\"\r\n      activeThumbColor=\"#e2e8f0\"\r\n      ariaLabel=\"Toggle color scheme\"\r\n      onChange={(mode) => {\r\n        setMode(mode);\r\n      }}\r\n    \/>\r\n  );\r\n}<\/darkmodetoggle><\/pre>\n<div   id="j6sjwn9j3u"    style=\"margin-top:2em;margin-bottom:1em\"><span style=\"color:#1E1E1E;letter-spacing: 2px;border-left:#FF3030 3px solid;border-right:#FF3030 3px solid;padding-left: 8px;padding-right:8px;font-size: 12pt\"><strong>4.\u9ed8\u8ba4\u7684\u7ec4\u4ef6\u9053\u5177<\/strong><\/span><\/div>\n<pre>mode = 'dark',\r\ndark,\r\nlight,\r\nonChange,\r\nsize = 'sm', \/\/ lg, md\r\ninactiveLabelColor = '#b9bdc1',\r\ninactiveLabelColorOnHover = '#fcfefe',\r\ninactiveLabelColorOnActive = '#cdd1d5',\r\nactiveLabelColor = '#5b5e62',\r\nactiveLabelColorOnHover = '#404346',\r\nactiveLabelColorOnActive = '#010101',\r\ninactiveTrackColor = '#dce0e3',\r\ninactiveTrackColorOnHover = '#fcfefe',\r\ninactiveTrackColorOnActive = '#cdd1d5',\r\nactiveTrackColor = '#404346',\r\nactiveTrackColorOnHover = '#2d2f31',\r\nactiveTrackColorOnActive = '#141516',\r\ninactiveThumbColor = '#2d2f31',\r\nactiveThumbColor = '#dce0e3',\r\nfocusRingColor = 'rgb(59 130 246 \/ 0.5)',\r\nariaLabel,<\/pre>\n<div   id="j6sjwn9j3u"    style=\"font-size: 14pt; color: white; background-color: black; border-left: red 10px solid; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;\"><strong>\u9884\u89c8<\/strong><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lrxjmw.cn\/wp-content\/uploads\/2022\/10\/20221025083737038.jpg\" alt=\"\" width=\"150\" height=\"150\" class=\"aligncenter size-full wp-image-256095\" \/><\/p>\n<p>The postDark Mode Toggle Component For Reactappeared first onReactScript.<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662fReact\u53ef\u5b9a\u5236\u9ed1\u6697\u6a21\u5f0f\u5207\u6362\u5f00\u5173\u7ec4\u4ef6\u7684\u8be6\u7ec6\u5185\u5bb9\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e00\u4e2a\u7528\u4e8eReact\u7684\u53ef\u5b9a\u5236\u7684\u9ed1\u6697\u6a21\u5f0f\u5207\u6362\u5f00\u5173\u7ec4\u4ef6\u3002 npm install @anatoliygatt\/dar [&hellip;]<\/p>\n","protected":false},"author":362,"featured_media":119570,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-256087","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread"],"acf":[],"_links":{"self":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/256087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/users\/362"}],"replies":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/comments?post=256087"}],"version-history":[{"count":3,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/256087\/revisions"}],"predecessor-version":[{"id":256306,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/256087\/revisions\/256306"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media\/119570"}],"wp:attachment":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media?parent=256087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/categories?post=256087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/tags?post=256087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}