styled-component模板文字返回未定义到react组件

// variables.js
export const primaryColor = '#3498db';

// MyComponent.js
import styled from 'styled-components';
import { primaryColor } from './variables';

const StyledDiv = styled.div`
  color: ${primaryColor};
`;

// MyComponent.js
import styled from 'styled-components';

const primaryColor = '#3498db';

const StyledDiv = styled.div`
  color: ${primaryColor};
`;

// variables.js
export const getPrimaryColor = () => '#3498db';

// MyComponent.js
import styled from 'styled-components';
import { getPrimaryColor } from './variables';

const StyledDiv = styled.div`
  color: ${getPrimaryColor()};
`;

// global.css
:root {
  --primary-color: #3498db;
}

// MyComponent.js
import styled from 'styled-components';
import './global.css';

const StyledDiv = styled.div`
  color: var(--primary-color);
`;

// variables.js
export const primaryColor = '#3498db';

// MyComponent.js
import React from 'react';
import styled from 'styled-components';
import { primaryColor } from './variables';

const StyledDiv = styled.div`
  color: ${primaryColor};
  font-size: 16px;
  padding: 10px;
`;

const MyComponent = () => {
  return (
    <div>
      <StyledDiv>Hello, World!</StyledIdv>
    </div>
  );
};

export default MyComponent;