Styled Numeric Counter Component

Create a React component that displays a numeric input with increment/decrement controls, where different parts of the component have distinct custom styling.

Requirements

Build a counter component that:

• Displays a numeric input field that starts at 0
• Has increment and decrement buttons (up/down arrows or +/- buttons)
• Allows users to type values directly into the input field
• Applies custom CSS classes to different parts of the component:
  • The root container should have a custom border and padding
  • The input field itself should have distinct background and text colors
  • The control buttons area should have a different background color

The styling should be applied to the semantic parts of the component, not through wrapper elements or traditional CSS targeting.

Implementation

@generates

API

import React from 'react';

/**
 * A styled numeric counter component with custom styling for different parts
 */
export default function StyledCounter(): React.ReactElement;

Test Cases

• The component renders with an initial value of 0 displayed in the input field @test
• Clicking the increment button increases the displayed value from 0 to 1 @test
• Clicking the decrement button decreases the displayed value from 0 to -1 @test
• The root element has the CSS class 'custom-root' applied @test
• The input field element has the CSS class 'custom-input' applied @test
• The actions container element has the CSS class 'custom-actions' applied @test

Dependencies { .dependencies }

@rc-component/input-number { .dependency }

Provides numeric input functionality with built-in controls and styling capabilities.

@satisfied-by