Styling the Container Component in ReactJS

Question

Styling the Container Component in ReactJS

I need to apply some styling to the "Forms_formline__3DRaL" div (shown below). This div is generated by a component, but it seems that the style I want to add is being applied to the input instead of its parent div. How can I use ReactJS to set the style "display: none" for the parent div?

Below is the code snippet:

<MyInput
  style={{
    display:
      type == 1
        ? 'none'
        : 'block',
  }}
  id="name"
  type="text"
  label={t('elevation_loss')}
  value="name"
/>

And here is how it appears in the source code on my Chrome browser:

<div class="Forms_formline__3DRaL">
    <label for="name">Name *</label>
    <input type="text" id="name" value="" style="display: none;">
</div>

css reactjs next.js

Answer 1

Answer №1

If you're looking to implement something similar, consider the following approach:

import { CSSProperties, FC } from 'react';

export const CustomInput: FC<{
    styles: {
        wrapper: CSSProperties;
    };
    id: string;
    type: string;
    label: string;
}> = ({ styles }) => {
    return (
        <>
            <div className="Custom_inputWrapper" style={styles.wrapper}>
                ...
            </div>
        </>
    );
};

Answer 2

If you're looking to implement something similar, consider the following approach:

import { CSSProperties, FC } from 'react';

export const CustomInput: FC<{
    styles: {
        wrapper: CSSProperties;
    };
    id: string;
    type: string;
    label: string;
}> = ({ styles }) => {
    return (
        <>
            <div className="Custom_inputWrapper" style={styles.wrapper}>
                ...
            </div>
        </>
    );
};

Styling the Container Component in ReactJS

Answer №1

Similar questions

Tips for achieving consistent outcomes on both IE and Chrome when utilizing the `min` attribute in HTML input tags

Sending data retrieved asynchronously to child components' props

What are the disadvantages of using getBoundingClientRect() in ReactJS?

If the width is below 767, the previous code will not be effective in jQuery

What are the advantages of passing state from child components up in React?

Utilize Flexbox's column direction to ensure that all flex items within the same column have uniform height

Utilize a viewpoint alteration alongside a floating effect on a specific element

Utilizing Array properties within a JavaScript class

Python Automation with Selenium (Locating elements using CSS selectors)

Is it possible to establish a CSS minimum width that is relative to a different element?

Capture only the image contained within the specified rectangle using the Microblink SDK

Recurrence of solely the middle segment of the separator's background picture

Mobile Windows Z-Index

"Interactive table feature allowing for scrolling, with anchored headers and columns, as well as the option to fix

Guide to saving an Object to a file (JSON) within the project directory using React Native for Debuggingpurposes

In development, Next.js dynamic routes function correctly, but in production they are displaying a 404 error page

Adding an image within the body of text in a Django model, where both the text and image coexist

The issue of height and width always being zero in Chrome when using Classic ASP with JavaScript

React Navigation Item Toolbar Misplacement

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes