How to do I manipulate the classes of schedule container in Availability setting Atom

[vaibhav135]

Even though the scheduleContainer prop is provided. But it seems like nothing is happening when I am adding any kind of css for it

[dosubot[bot]]

To manipulate the classes of the scheduleContainer in the AvailabilitySettings component, ensure that the customClassNames prop is correctly structured and passed to the component. The scheduleContainer class should be part of the scheduleClassNames object within customClassNames. Here's an example of how you can set it:

<AvailabilitySettings
  customClassNames={{
    scheduleClassNames: {
      scheduleContainer: "your-custom-class"
    }
  }}
  enableOverrides={true}
  // other props
/>

Make sure that the CSS class your-custom-class is defined in your stylesheets. If changes are not taking effect, verify that the class name is correctly applied and that there are no CSS specificity issues or conflicts with other styles. Additionally, ensure that the customClassNames object is correctly structured as per the component's requirements ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[vaibhav135]

@dosu I've already tried this it's not working.

[dosubot[bot]]

If the scheduleContainer class is not being applied as expected, consider the following troubleshooting steps:

1. Check CSS Specificity: Ensure that there are no other CSS rules with higher specificity that might be overriding your custom class. You can use browser developer tools to inspect the element and see which styles are being applied.

2. Verify Class Application: Use the developer tools to confirm that the scheduleContainer class is actually being added to the element. If it's not, there might be an issue with how the customClassNames prop is being passed or used in the component.

3. Inspect JavaScript Logic: Although there are no known conditions or additional props that affect the application of the scheduleContainer class, ensure that there is no JavaScript logic within the component that might be preventing the class from being applied.

4. Recent Changes: Check if there have been any recent changes to the AvailabilitySettings component that might affect how custom class names are applied. The component now includes a customClassNames prop for customization, so ensure your implementation aligns with the latest updates ^[1].

5. Enable Overrides: Since you have enableOverrides set to true, ensure that this is not affecting the application of your custom styles in an unexpected way. This prop should allow custom class names to be applied, but it's worth double-checking ^[2].

If none of these steps resolve the issue, consider reviewing the component's implementation to ensure there are no internal styles or logic that might be interfering with your custom styles.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}