how to change borderRadius

[cwikio]

hi,
could someone tell me please how to change the default styles and border radious? I did find styles.js and set borderRadius to 0 everywhere, but the whole thing is still rounded everywhere. I restarted nextjs, played with style.js and borderRadius does NOT appear to be influencing anything. I successfully managed to change button border radius, but nothing else seems to be responding. Any help would be appreciated

this is my component:

<JoyRide
	steps={steps}
	continuous={true}
	showSkipButton={true}
	showProgress={true}
	callback={(data) => {
		// console.log('in joyride callback', { currentStep: data.index + 1, lastStepIndex: steps.length, data })
		if (pathname === '/post/newpost' && data.index + 1 === steps.length) {
			// console.log('setting startingStep to 3')
			setRoute('/feed')
			setStartingStep(3)
		} else if (pathname === '/feed' && data.index + 1 === steps.length) {
			apiMutation.mutate(Badge.FinishedCreatedFirstPostTour)
		}
	}}
	styles={{
		tooltipContainer: {
			textAlign: 'left',
			borderRadius: 0,
		},
		buttonNext: {
			backgroundColor: 'green',
			borderRadius: 0,
		},
		buttonBack: {
			marginRight: 10,
			borderRadius: 0,
		},
		options: {
			zIndex: 10000,
			backgroundColor: 'rgba(255, 255, 255, 1)',
			overlayColor: 'rgba(0, 0, 0, 0.7)',
		},
	}}
/>

this is the styles.js:

import deepmerge from 'deepmerge';
import { hexToRGB } from './modules/helpers';

const defaultOptions = {
  arrowColor: '#fff',
  backgroundColor: '#fff',
  beaconSize: 36,
  overlayColor: 'rgba(0, 0, 0, 0.7)',
  primaryColor: '#F31427',
  spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',
  textColor: '#333',
  zIndex: 10000,
};

const buttonBase = {
  backgroundColor: 'transparent',
  border: 0,
  borderRadius: 0,
  color: '#555',
  cursor: 'pointer',
  fontSize: 16,
  lineHeight: 1,
  padding: 8,
  WebkitAppearance: 'none',
};

const spotlight = {
  borderRadius: 0,
  position: 'absolute',
};

export default function getStyles(stepStyles = {}) {
  const options = deepmerge(defaultOptions, stepStyles.options || {});
  let width = 290;

  if (window.innerWidth > 480) {
    width = 380;
  }

  if (options.width) {
    if (window.innerWidth < options.width) {
      width = window.innerWidth - 30;
    } else {
      width = options.width; //eslint-disable-line prefer-destructuring
    }
  }

  const overlay = {
    bottom: 0,
    left: 0,
    overflow: 'hidden',
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: options.zIndex,
  };

  const defaultStyles = {
    beacon: {
      ...buttonBase,
      display: 'inline-block',
      height: options.beaconSize,
      position: 'relative',
      width: options.beaconSize,
      zIndex: options.zIndex,
    },
    beaconInner: {
      animation: 'joyride-beacon-inner 1.2s infinite ease-in-out',
      backgroundColor: options.primaryColor,
      borderRadius: '50%',
      display: 'block',
      height: '50%',
      left: '50%',
      opacity: 0.7,
      position: 'absolute',
      top: '50%',
      transform: 'translate(-50%, -50%)',
      width: '50%',
    },
    beaconOuter: {
      animation: 'joyride-beacon-outer 1.2s infinite ease-in-out',
      backgroundColor: `rgba(${hexToRGB(options.primaryColor).join(',')}, 0.2)`,
      border: `2px solid ${options.primaryColor}`,
      borderRadius: '50%',
      boxSizing: 'border-box',
      display: 'block',
      height: '100%',
      left: 0,
      opacity: 0.9,
      position: 'absolute',
      top: 0,
      transformOrigin: 'center',
      width: '100%',
    },
    tooltip: {
      backgroundColor: options.backgroundColor,
      borderRadius: 0,
      boxSizing: 'border-box',
      color: options.textColor,
      fontSize: 16,
      maxWidth: '100%',
      padding: 15,
      position: 'relative',
      width,
    },
    tooltipContainer: {
      lineHeight: 1.4,
      textAlign: 'center',
      borderRadius: 0
    },
    tooltipTitle: {
      fontSize: 18,
      margin: 0,
    },
    tooltipContent: {
      padding: '20px 10px',
    },
    tooltipFooter: {
      alignItems: 'center',
      display: 'flex',
      justifyContent: 'flex-end',
      marginTop: 15,
    },
    tooltipFooterSpacer: {
      flex: 1,
    },
    buttonNext: {
      ...buttonBase,
      backgroundColor: options.primaryColor,
      borderRadius: 0,
      color: '#fff',
    },
    buttonBack: {
      ...buttonBase,
      color: options.primaryColor,
      marginLeft: 'auto',
      marginRight: 5,
    },
    buttonClose: {
      ...buttonBase,
      color: options.textColor,
      height: 14,
      padding: 15,
      position: 'absolute',
      right: 0,
      top: 0,
      width: 14,
    },
    buttonSkip: {
      ...buttonBase,
      color: options.textColor,
      fontSize: 14,
    },
    overlay: {
      ...overlay,
      backgroundColor: options.overlayColor,
      mixBlendMode: 'hard-light',
    },
    overlayLegacy: {
      ...overlay,
    },
    overlayLegacyCenter: {
      ...overlay,
      backgroundColor: options.overlayColor,
    },
    spotlight: {
      ...spotlight,
      backgroundColor: 'gray',
    },
    spotlightLegacy: {
      ...spotlight,
      boxShadow: `0 0 0 9999px ${options.overlayColor}, ${options.spotlightShadow}`,
    },
    floaterStyles: {
      arrow: {
        color: options.arrowColor,
      },
      options: {
        zIndex: options.zIndex + 100,
      },
    },
    options,
  };

  return deepmerge(defaultStyles, stepStyles);
}

[gilbarbara]

Hey @cwikio
You only need to set tooltip in the styles prop.

<Joyride
  ...
  styles={{
    tooltip: {
      borderRadius: 0
    },
  }}
  ...
/>

Did you update the styles.js inside the package directory?
If you did, the files inside src aren't being "used". They are only in the package for the source maps.
The bundlers use lib or es code instead.
To be safe, uninstall react-joyride and install it again.

[cwikio]

thank you. that has helped.