Customizing Styles
Relevant source files
The following files were used as context for generating this wiki page:
The visual appearance of the react-multi-step-form is controlled by a set of CSS files, each targeting a specific component or providing global styles. This modular approach allows for targeted customizations without affecting unrelated parts of the application. The styling is primarily class-based, making it straightforward to override or extend existing styles.
The core styling is divided into global styles, container styles for the multi-step form itself, common styles for the individual form steps, and specific styles for the final review page. These are imported directly into their corresponding React components, ensuring that styles are loaded along with the component logic.
Style Architecture
The project's styling is organized into several CSS files located in the src/styles directory, supplemented by global styles in src/. The following diagram illustrates how these stylesheets are imported and applied throughout the application structure.
This diagram shows that index.js imports index.css for base styles. App.js imports App.css and renders the MultiStepForm component. The MultiStepForm component imports its own stylesheet (MultiStepForm.css) and renders the individual form step components, which in turn import their specific stylesheets.
Sources: src/index.js:3, src/App.js:2,5, src/components/MultiStepForm.jsx:8,9, src/components/formsteps/PersonalInfo.jsx:2, src/components/formsteps/ReviewSubmit.jsx:2
Global and App-Level Styles
Global styles are defined to provide a consistent base for the entire application.
index.css
This file sets the base font family and box model behavior for the entire application. It applies font-family and performs basic resets.
Sources: src/index.css:1-12
App.css
This stylesheet centers the main application content and sets a background color. The .App-header class is used as the primary container for the MultiStepForm.
| Class | Description | Source |
|---|---|---|
.App | Sets text alignment to center for the main app container. | src/App.css:1-3 |
.App-header | Defines the main layout using flexbox to center the form vertically and horizontally. Sets the background color to #e6e6e6. | src/App.css:16-24 |
Sources: src/App.css, src/App.js:7
Multi-Step Form Container Styles
The main container for the entire form, including the progress bar, is styled by MultiStepForm.css.
Key Classes in MultiStepForm.css
| Class | Description | Source |
|---|---|---|
.multi-step-form-container | The top-level wrapper for the form, managing padding and positioning. | src/styles/MultiStepForm.css:10-16 |
.progress-div | Container for the progress bar and step counter text. | src/styles/MultiStepForm.css:18-24 |
.progress-bar | The background track of the progress indicator. | src/styles/MultiStepForm.css:31-38 |
.progress-bar-inner | The filled portion of the progress bar, which grows as the user advances through steps. It uses a repeating linear gradient for a striped effect. | src/styles/MultiStepForm.css:40-51 |
.form-wrapper | A flex container that holds all form steps. | src/styles/MultiStepForm.css:53-57 |
.form-content | A flex container with a width of 400% that holds the four form steps side-by-side. A transform: translateX is used to show the current step. | src/styles/MultiStepForm.css:59-62, src/components/MultiStepForm.jsx:190-192 |
The progress bar's width is dynamically updated via an inline style in the MultiStepForm.jsx component.
// src/components/MultiStepForm.jsx:181-183
<div
className="progress-bar-inner"
style={{ width: `${(step / 4) * 100}%` }}
></div>
Sources: src/styles/MultiStepForm.css, src/components/MultiStepForm.jsx:181-183
Form Step Styles
The file src/styles/Form.css provides a unified look and feel for the input fields, labels, and navigation buttons across the "Personal Info," "Address Details," and "Payment Info" steps.
Form Structure and Key Classes
The diagram below shows the relationship between the main container and its child elements as defined in Form.css.
Sources: src/styles/Form.css
Styling Details in Form.css
| Class / Element | Description | Source |
|---|---|---|
.form-container | The main wrapper for each form step. It uses opacity and margin to create a transition effect when it becomes active. | src/styles/Form.css:1-14 |
.form-container.active | Increases opacity to 1 and reduces margin to bring the active form into focus. | src/styles/Form.css:122-125 |
label | Styles for field labels, including font size, weight, and color. | src/styles/Form.css:22-29 |
input, select | General styles for all input and select fields, defining width, padding, and borders. | src/styles/Form.css:35-43 |
.error-input | Applied to an input field when validation fails, adding a red border. | src/styles/Form.css:110-112 |
.error-text | Styles the validation error message with red text. | src/styles/Form.css:114-119 |
.button-group | A flex container to position the "GO BACK" and "NEXT" buttons. | src/styles/Form.css:54-57 |
.go-back-btn | Styles for the back button, featuring a white background and green text/border. | src/styles/Form.css:72-76 |
.next-btn | Styles for the next button, with a solid green background and a right arrow pseudo-element. | src/styles/Form.css:83-87, src/styles/Form.css:94-98 |
The next-btn includes a ::after pseudo-element to display an arrow, enhancing user guidance.
/* src/styles/Form.css:94-98 */
.next-btn::after {
content: "→"; /* Right arrow */
margin-left: 78px; /* Space between text and arrow */
font-size: 16px; /* Adjust arrow size */
}
Sources: src/styles/Form.css, src/components/formsteps/PersonalInfo.jsx:6, 44
Review & Submit Page Styles
The final step of the form has its own dedicated stylesheet, src/styles/ReviewSubmit.css, to handle the layout of the review sections and the final submit button.
Key Classes in ReviewSubmit.css
| Class | Description | Source |
|---|---|---|
.review-submit-container | The main wrapper for the review page, setting max-width, padding, and shadow. | src/styles/ReviewSubmit.css:1-9 |
.review-section | A container for each group of information (e.g., Personal, Address). | src/styles/ReviewSubmit.css:16-18 |
.review-note | Styles a small note encouraging the user to review their information. | src/styles/ReviewSubmit.css:32-36 |
.submit-btn | Styles the final submission button. | src/styles/ReviewSubmit.css:43, 57-60 |
.spinner | Defines a loading spinner animation shown on the submit button when loading is true. | src/styles/ReviewSubmit.css:69-76 |
.submit-btn:disabled | Reduces opacity and changes the cursor when the submit button is disabled during loading. | src/styles/ReviewSubmit.css:86-89 |
The loading spinner is implemented with a CSS keyframe animation.
/* src/styles/ReviewSubmit.css:78-84 */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
This animation is applied to the .spinner class, which is rendered inside the submit button when the form is processing.
Sources: src/styles/ReviewSubmit.css, src/components/formsteps/ReviewSubmit.jsx:59-62
Summary
Customizing the styles of the react-multi-step-form involves editing a set of well-defined, component-specific CSS files. By targeting the classes outlined in this document, a developer can modify colors, fonts, layout, and other visual properties. The use of global styles for the base, container styles for the overall structure, and specific stylesheets for individual components creates a maintainable and scalable styling architecture.