Kafkae

Можно так.

Так же, как и в любой другой компонент. А примеры использования пропсов можете посмотреть в документации.

UPD. Глянул код - так у вас же часть работы уже сделана. Некоторые из компонентов уже принимает пропсы - Container, например, или Wrapper. Возьмём Wrapper - у него есть itemWidth и itemHeight. Ну и отлично:

<Wrapper itemHeight="300px">

Говорите, дефолтное значение надо? Ну так пусть вместо height: ${p => p.itemHeight}; будет height: ${p => p.itemHeight || '200px'};, например. Или можно переписать компонент так:

export const Wrapper = styled.article(({
  itemWidth,
  itemHeight = '200px',
}) => ({
  backgroundColor: '#efefef',
  margin: '5px',
  height: itemHeight,
  width: itemWidth,
}));

const ItemComponent = props => (
  <div>
    <p>{props.title}</p>
  </div>
);

...

<Carousel
  items={items}
  ItemComponent={ItemComponent}
/>

UPD. https://codesandbox.io/s/42p1q66589

почему не прибавляется, если в рендере написать console.log('render', this.state)
то и будет value: 60

--

в таймауте же надо прибавлять value, а не в componentDidMount?
вот так заполняется "нанобар"

this.timeout = setInterval(() => {
      this.setState({ value: this.state.value + this.props.speed });
      this.nanobar.go(this.state.value);
    }, 1000);

Вы запускаете сагу до того как создался стор.

const configureStore = history => {
  const store = createStore(
    rootReducer(history),
    composeWithDevTools(
      applyMiddleware(routerMiddleware(history), sagaMiddleware, logger)
    )
  );
  sagaMiddleware.run(rootSaga);
  return store;
};