Reactでの一覧ページにstyled-componentsでスタイルをあてる方法

Question

前提・実現したいこと

今、Reactを使って一覧ページを作っているのですが、色んなサイトで調べてみているのですが、
調べ方が悪いみたいで具体的な解決策が見つからず悩んでいます。
申し訳ないですが、どなたかわかる方がいれば教えていただきたいです。
よろしくお願いします。

エラー内容：

TypeError: Cannot read property 'SUB_TEXT' of undefined

ソースコード：

import styled from 'styled-components';
import { COLORS, FONT_SIZE } from '../style_constants';

export const SubText = styled.p`
    color: ${COLORS.SUB_TEXT}; ←　ここでエラー
    font-size: ${FONT_SIZE.BODY2};
`;

Reactサイト表示画面

 853 | 
  854 | __webpack_require__.$Refresh$.init();
  855 | try {
> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  857 | } finally {
  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);
  859 | }


 147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {

補足情報（FW/ツールのバージョンなど）

axios@0.21.1
react-dom@17.0.2
react-router-dom@5.2.0
react-scripts@4.0.3
react@17.0.2
styled-components@5.3.0
web-vitals@1.1.2

もっと情報等が必要であれば、対応しますのでよろしくお願いします。

Comments

[FKM]

COLORSはCSSファイルでしょうか？中を提示してもらえませんか。

[soejima]

おそくなりすいません。
こちらがCOLORS使っているソースコードになります。

import React from 'react';
import styled from 'styled-components';

// components
import { SubText } from './StyledText';

// constants
import { COLORS } from '../style_constants';

const Wrapper = styled.div`
display: flex;
width: 450px;
height: 180px;
border-width: 1px;
border-style: solid;
border-color: ${COLORS.BORDER};←ここで使用しています。
border-image: initial;
cursor: pointer;
`;

const FoodDetail = styled.div`
padding: 24px 16px;
width: 250px;
`;

const DescriptionWrapper = styled.div`
height: 75px;
`

const PriceWrapper = styled.div`
margin-top: 16px;
`

const FoodImageNode = styled.img`
width: 250px;
`;

export const FoodWrapper = ({
food,
onClickFoodWrapper,
imageUrl,
}) => (
<Wrapper onClick={() => onClickFoodWrapper(food)}>
<FoodDetail>
{food.name}
<DescriptionWrapper>
<SubText>
{food.description}
</SubText>
</DescriptionWrapper>
<PriceWrapper>
¥{food.price}
</PriceWrapper>
</FoodDetail>
<FoodImageNode src={imageUrl} />
</Wrapper>
)

Answer 1

自己解決できました。
下記のコードを定義するフォルダの場所を間違っていたことによって
エラーが発生していました。

import styled from 'styled-components';
import { COLORS, FONT_SIZE } from '../style_constants';

export const SubText = styled.p color: ${COLORS.SUB_TEXT}; font-size: ${FONT_SIZE.BODY2};;

FKMさんコメントしていただきありがとうございました！