要为不同视口的不同配置使用react-styled-flexboxgrid，您可以使用媒体查询和CSS-in-JS的技术来实现。

首先，您需要安装react-styled-flexboxgrid包。

npm install react-styled-flexboxgrid

然后，您可以创建一个包含您不同配置的Styled Component组件。

import styled from 'styled-components';
import { FlexboxGrid } from 'react-styled-flexboxgrid';

const StyledFlexboxGrid = styled(FlexboxGrid)`
  // 默认配置
  @media (max-width: 768px) {
    // 小屏配置
  }
  
  @media (min-width: 769px) and (max-width: 1024px) {
    // 中屏配置
  }
  
  @media (min-width: 1025px) {
    // 大屏配置
  }
`;

export default StyledFlexboxGrid;

在上面的示例中，我们创建了一个名为StyledFlexboxGrid的Styled Component，并为不同的媒体查询条件定义了不同的配置。

然后，您可以在您的应用程序中使用这个Styled Component。

import React from 'react';
import StyledFlexboxGrid from './StyledFlexboxGrid';

const App = () => {
  return (
    
      {/* 在这里放置您的内容 */}
    
  );
}

export default App;

通过这种方式，您可以为不同的视口配置不同的react-styled-flexboxgrid样式。根据您的需求，您可以使用不同的CSS属性和值来配置每个媒体查询条件下的Styled Component。