React项目中缩小reactstrap Carousel尺寸及左侧菜单布局问题求助

Hey there! Let's work through fixing that layout chaos with your carousel and left menu. I've looked at your code, and the main issues are conflicting CSS rules, missing layout structure for the menu, and unresponsive images. Here's how to fix it step by step:

1. Fix the Layout Structure for the Left Menu #

First, we need to set up a flex container to make the left menu and carousel sit side by side instead of stacking. Update your App component's main section to organize the elements properly:

import React from 'react';
import Shelf from '../Shelf';
import Filter from '../Shelf/Filter';
import GithubCorner from '../github/Corner';
import FloatCart from '../FloatCart';
import ControlledCarousel from './ControlledCarousel';

const App = () => (
  <React.Fragment>
    <GithubCorner />
    <main style={{ padding: '10px' }}>
      {/* Container for menu + carousel to sit side by side */}
      <div style={{ display: 'flex', gap: '20px', marginBottom: '20px', alignItems: 'flex-start' }}>
        {/* Left Menu - customize styles as needed */}
        <ul style={{ 
          width: '200px', 
          listStyle: 'none', 
          padding: '10px', 
          backgroundColor: '#f0f0f0',
          borderRadius: '4px'
        }}>
          <li>Category 1</li>
          <li>Category 2</li>
          <li>Category 3</li>
        </ul>
        {/* Carousel container that takes remaining space */}
        <div style={{ flex: 1 }}>
          <ControlledCarousel />
        </div>
      </div>
      {/* Keep Filter and Shelf below the menu/carousel */}
      <Filter />
      <Shelf />
    </main>
    <FloatCart />
  </React.Fragment>
);

export default App;

2. Fix Conflicting CSS Rules & Image Responsiveness #

Your current SCSS has conflicting width settings (.carousel at 900px vs .slider-cart at 450px) and uses outdated selectors for reactstrap's carousel structure. Replace your style.scss with this cleaned-up version:

// Ensure carousel images fit their container without breaking layout
.carousel-item > img {
  width: 100%;
  height: auto;
  object-fit: cover; // Optional: keeps image ratio, crops overflow if needed
}

// Set your desired carousel size (adjust to your needs)
.custom-carousel {
  width: 450px;
  height: 250px;
  background-color: #1b1a20;
  box-sizing: border-box;
}

// Remove conflicting .slider-cart width rule, keep other styles if needed
.slider-cart {
  position: relative;
  top: 0;
  left: 10px;
  transition: right 0.2s;
}

// Responsive adjustment for smaller screens
@media (max-width: 768px) {
  .custom-carousel {
    width: 100%;
    height: auto;
  }
}

3. Clean Up Component Class Names #

Update your ControlledCarousel component to use the new .custom-carousel class instead of reusing .slider-cart for both the carousel and its items (this avoids style conflicts):

// In the render method of ControlledCarousel:
return (
  <Carousel className="custom-carousel" activeIndex={activeIndex} next={this.next} previous={this.previous}>
    <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
    {slides}
    <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
    <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
  </Carousel>
);

Why This Works #

• Flex Layout: The flex container ensures the left menu and carousel share horizontal space instead of stacking.
• No Conflicting Widths: We've removed duplicate width rules and set a clear size for the carousel.
• Responsive Images: The updated image selector ensures images fit their container without breaking layout.
• Clean Component Styling: Separating the carousel container style from item styles prevents unintended inheritance.

Quick note: This layout issue has nothing to do with react-redux, so you don't need to touch any of your Redux setup!

内容的提问来源于stack exchange，提问作者maifs