how to access a component style in react js

To do this you need a ref to the actual DOM element rendered by renderCard().

renderCard() here returns a React element which doesn't have the style property or any other DOM properties on it - it's just a React representation of what the DOM element will eventually be once rendered - hence you need to get the actual DOM element via a ref where you'll have access to this and other properties.

Example code below using useRef to create the ref that will be attached to the element with the style you need to access. Note how useEffect is used to access the ref's value because it's only available after the first render when the DOM element is present.

const Example = () => {
  const ref = React.useRef()
  
  React.useEffect(() => {
    alert('overflow value is: ' + ref.current.style.overflow)
  }, [])
  
  return (
    <div ref={ref} style={{ overflow: 'scroll' }}>hello world</div>
  )
}

ReactDOM.render(<Example />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Refactor the cards to be actual rendered components, pass the ref and attach to the elements

const SearchCard = ({ overflowRef }) => (
  <button ref={overflowRef} class="invisible-button" onClick={onSearchCardClick}>
    //
  </button>
);

const AnswerCard = ({ overflowRef }) => (
  <div ref={overflowRef} className="results-set">
    //
  </div>
);

const RenderCard = ({ overflowRef }) => {
  if (card && card.answer) {
    return <AnswerCard overflowRef={overflowRef} />;
  } else if (card) {
    return <SearchCard overflowRef={overflowRef} />;
  }
  return null;
};

In the component rendering them, create a ref using either createRef or useRef react hook if it is a functional component

const overflowRef = createRef();

or

const overflowRef = useRef();

Pass the ref to RenderCard, to be passed on

<RenderCard overflowRef={overflowRef} />

And then check the overflow value as such

overflowRef.current.style.overflow === "scroll"

With the approach above you might want to refactor some of the HoC components and pass a function from parent to child that returns the ref of the element to be accessed also I am not sure of the scope of the block of code where you are executing the ternary.

Perhaps a simpler hack is to rely on using a useState hook with vanilla DOM selectors and passing that into the or even better, just add it to the stateless func component that wraps React.Fragment as a hook:

  const myComponent = () => {
      const [hasScrollOverflow, setHasScrollOverflow] = useState(false);

      React.useEffect(() => {
        const element = document.querySelector(".results-set");
        const elementStyle = element.style;

        if (elementStyle.getPropertyValue('overflow') === 'scroll') {
          setHasScrollOverflow(true);
        }

      }, [])
      return (
        <React.Fragment>
          <div id="search-results">{renderCard()}</div>
          {renderFollowup ? null : (
            <React.Fragment>
              <div id="search-footer">
                {hasScrollOverflow ? (
                  <div className="scroll-button">
                    <a href="#bottomSection">
                      <img src="images/arrow_down.svg" alt="scroll to bottom" />
                    </a>
                  </div>
                ) : null}
              </div>
            </React.Fragment>
          )}
        </React.Fragment>
      );
    };