<Pie>
      <OtherComp>
      <div>
          <Slice>
          </Slice>
          <Slice>
          </Slice>
      </div>
      </OtherComp>
    </Pie>

class Pie extends Component {

    render() {
      const { children } = this.props;

      // тут надо передать параметры color
      // которые компонент  Slice ожидает

      return (
        <g>
          {children}
        </g>
      );
    }
}




class Slice extends Component {

    render() {
      const { color } = this.props;

      return (
        <line color={color}></line>
         );
    }
}

import React, {Component} from 'react';

export const ThemeContext = React.createContext('light');

    class Pie extends Component {

        render() {
            const {children} = this.props;
            // тут надо передать параметры color
            // которые компонент  Slice ожидает
            const color = '#FFF'
            return (
            <ThemeContext.Provider value={color}>
                <g>
                    {children}
                </g>
            </ThemeContext.Provider>);
        }
    }
    export default Pie;

import React, {Component} from 'react';
import { ThemeContext } from '../Pie'

export default class Slice extends Component {
    render() {
      return (
        <ThemeContext.Consumer>
             {color=>   <line color={color}>{color}</line>  }
        </ThemeContext.Consumer>
         );
    }
}

<Pie>
      <OtherComp>
      <div>
          <Slice>
          </Slice>
          <Slice>
          </Slice>
      </div>
      </OtherComp>
    </Pie>