NestOnlyOnce.js

import React from 'react';
import ReactDOM from 'react-dom';

function WrapperStyle(props) {
  return (
    <div style={{padding: "10px", border: "10px solid red"}}>
      {props.children}
    </div>
  )
}

function WrapperStyleOnce(Component) {
  const A = function (props) {
    let isAlreadyWrapped = false;
    React.Children.forEach(props.children, child => {
      if(child.type && child.type.displayName == "WrapperStyle")
        isAlreadyWrapped = true;
    })
    if(isAlreadyWrapped) {
      return (
        <React.Fragment>
          {props.children}
        </React.Fragment>
      )
    } else {
      return (
        <WrapperStyle>{props.children}</WrapperStyle>
      )
    }
  }
  A.displayName = "WrapperStyle"
  return A
}

// Components that use it

function Component1_raw(props) {
  return (
    <React.Fragment>
      {props.children}
    </React.Fragment>
  )
}

function Component2_raw(props) {
  return (
    <React.Fragment>
      {props.children}
    </React.Fragment>
  )
}

const Component1 = WrapperStyleOnce(Component1_raw)
const Component2 = WrapperStyleOnce(Component2_raw)


// Example use

function App(props) {
  return (
    <Component1>
      <Component2>
        Example
      </Component2>
    </Component1>
  )
}

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