如何调整 React 中侧边栏的大小

huangapple
go评论92阅读模式
英文:

How to adjust the sidebar size in React

问题

看起来你在React中遇到了一些问题。以下是你提供的代码的中文翻译：

  1. // App.css
  2. .sidemenu {
  3.   width: 1000px;
  4.   border: 1px solid white;
  5. }
  7. // App.js
  8. import logo from './logo.svg';
  9. import './App.css';
  11. function App() {
  12.   return (
  13.     <div className="App">
  14.       <aside className="sidemenu">
  15.         <h1>侧边栏</h1>
  16.       </aside>
  17.       <section>
  19.       </section>
  20.       <header className="App-header">
  21.         <img src={logo} className="App-logo" alt="logo" />
  22.         <p>
  23.           编辑 <code>src/App.js</code> 并保存以重新加载。
  24.         </p>
  25.         <a
  26.           className="App-link"
  27.           href="https://reactjs.org"
  28.           target="_blank"
  29.           rel="noopener noreferrer"
  30.         >
  31.           学习React
  32.         </a>
  33.       </header>
  34.     </div>
  35.   );
  36. }
  38. export default App;

希望这能帮助你解决问题。

英文:

I am new to react, and I am working on my first project, following https://www.youtube.com/watch?v=qwM23_kF4v4.

At the very beginning, I followed all the steps and tries to set a sidebar on the left with "240px", the expected is as left, but what I made is as right.

The code is below. I only add the sidemenu part.

I have rechecked the code in the video many times, but it still shows as below. Furthermore, I expected the sidebar to be 50% of the screen, as shown in the video.

I have changed the sidemenu width as "100%", "40vmin", but nothing works.
What I have tried is as follows in App.css:

  1. .sidemenu {
  2.   width: 1000px;
  3.   border:1px solid white;
  4. }

My App.js code is as follows:

  1. import logo from &#39;./logo.svg&#39;;
  2. import &#39;./App.css&#39;;
  4. function App() {
  5.   return (
  6.     &lt;div className=&quot;App&quot;&gt;
  7.      &lt;aside className=&quot;sidemenua&quot;&gt;
  8.        &lt;h1&gt;Aside&lt;/h1&gt;
  9.      &lt;/aside&gt;
  10.      &lt;section&gt;
  12.      &lt;/section&gt;
  13.      &lt;header className=&quot;App-header&quot;&gt;
  14.       &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
  15.       &lt;p&gt;
  16.         Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
  17.       &lt;/p&gt;
  18.       &lt;a
  19.         className=&quot;App-link&quot;
  20.         href=&quot;https://reactjs.org&quot;
  21.         target=&quot;_blank&quot;
  22.         rel=&quot;noopener noreferrer&quot;
  23.       &gt;
  24.         Learn React
  25.       &lt;/a&gt;
  26.     &lt;/header&gt;
  27.    &lt;/div&gt;
  28. );
  29. }
  30.  export default App;

Expected layout

My layout

答案1

得分: 1

请检查你的className是否与 CSS 选择器名称不同，应该是sidemenu。

  1. &lt;aside className=&quot;sidemenu&quot;&gt;
  2.     &lt;h1&gt;Aside&lt;/h1&gt;
  3. &lt;/aside&gt;
英文:

please check your className is differ from css selector name it should be
sidemenu.

  1. &lt;aside className=&quot;sidemenu&quot;&gt;
  2.     &lt;h1&gt;Aside&lt;/h1&gt;
  3. &lt;/aside&gt;

huangapple
  • 本文由 发表于 2023年2月6日 03:17:52
  • 转载请务必保留本文链接：https://go.coder-hub.com/75354869.html
  • css
  • html
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定