Styling

Explore your options for styling

Parent Container

Your parent container should define the dimensions you want for the Opening Hours component to fill.

Example:

src/form.js

import { OpeningHoursUnstyled } from "react-opening-hours";

export default function MyForm() {
  return (
    // - explicitly define the width you want the component to be given
    // - set height auto to allow it to grow/shrink vertically as days are added/removed
    <div style={{ width: "500px", height: "auto" }}>
      <OpeningHoursUnstyled defaultValues={defaultBusinessHours} />
    </div>
  );
}

className props

The following className props can be passed to the component:

rootContainerClassName,
dayButtonContainerClassName,
dayButtonActiveElementClassName,
dayButtonInactiveElementClassName,
labelContainerClassName,
labelElementClassName,
copyButtonContainerClassName,
copyButtonElementClassName,
selectContainerClassName,
selectElementClassName,

style props

The following style props can be passed to the component:

rootContainerStyles,
dayButtonContainerStyles,
dayButtonActiveElementStyles,
dayButtonInactiveElementStyles,
labelContainerStyles,
labelElementStyles,
copyButtonContainerStyles,
copyButtonElementStyles,
selectContainerStyles,
selectElementStyles,

Keep in mind specificity if you mix className and style!

copyButtonElement

Whether using className or style or renderCopyButton , it is recommended to use position: 'absolute' and define the top and right values

Internally there is a position: 'relative' property on the first activated day's closing time container, which places the expected position of the Copy To All button somewhere in the top-right region. Depending on other styles, the top and right values will surely need tweaking to get the placement just right

Tip: Use your own or 3rd party Icon Button. See Render Props.