Conditional statement to change the width of a info banner within a form-CodePudding

I currently have a form with dropdown. If the user clicks off the form dropdown and hasn't filled out a field they are presented an error banner. Also on this dropdown if a user selects a certain field instead or an error banner presenting itself under the dropdown they receive an info banner. My problem is that the error banner and info banners need to span different widths. The error banner needs to span 256px and the info banner 624px and responsive.

My error banner is fine at the moment but i can only really hard code the width for the info banner which I don';t think is a good solution.

Given the below code can I make a conditional statement that when the info banner is displayed the parent width would be extended? Here is the min code:

const StyledDropdown = styled.div ({
maxWidth: 256,
})

export default function Form() {
 return (
  <StyledDropdown>
   <Validation forThe=(RequestType)
    <RequestTypeDropDown
     requestTypeResponse={requestTypeResponse}

          onChange={selectedOption => {

            setFieldValue(RequestType, selectedOption)

          }}

          selectedRequestType={values.requestType}

          selectedClient={values[SelectedClient]}

          bannerText={values.requestType?.infoText}

        />

      </Validation>

    </StyledDropdown>

Can I use a conditional with the bannertext that would say if infotext is displayed change width of StyledDropdown?

CodePudding user response：

One solution is to set the style rule when referencing SyledDropdown.

export default function Form() {
 return (
  <StyledDropdown style={{maxWidth: values.requestType ? '624px' : '256px'}}>
    //...