javascript - styled-component import results in undefined - Stack Overflow

admin管理员组

文章数量:1022769

I'm just getting into styled-ponents and am having a little bit of an issue. I'm trying to extend a button through different files and for some reason it imports as undefined

This error initially appeared with a NavLink ponent which led to believe it might be a react issue but it also happens with a styled.a``; so I don't think that's it.

StyledComponents.jsx

import styled from 'styled-ponents';

export const Button = styled.a`
  // general styling
`;

App.jsx

import { Button } from './StyledComponents/StyledComponents';

console.log(Button); // this works fine

export const MainButton = styled(Button)`
  // a little color and other styles
`;

Banner.jsx

import { MainButton } from '../App';

console.log(MainButton); // returns undefined

// if I omit the console logging above, this gives error of undefined
const _MainButton = styled(MainButton)`
  // specific styles for this ponent
`;

I am not really sure what is going on. I am also not sure if this is the correct way to layer these styled ponents. If someone could share some insight, it would be much appreciated!

I'm just getting into styled-ponents and am having a little bit of an issue. I'm trying to extend a button through different files and for some reason it imports as undefined

This error initially appeared with a NavLink ponent which led to believe it might be a react issue but it also happens with a styled.a``; so I don't think that's it.

StyledComponents.jsx

import styled from 'styled-ponents';

export const Button = styled.a`
  // general styling
`;

App.jsx

import { Button } from './StyledComponents/StyledComponents';

console.log(Button); // this works fine

export const MainButton = styled(Button)`
  // a little color and other styles
`;

Banner.jsx

import { MainButton } from '../App';

console.log(MainButton); // returns undefined

// if I omit the console logging above, this gives error of undefined
const _MainButton = styled(MainButton)`
  // specific styles for this ponent
`;

I am not really sure what is going on. I am also not sure if this is the correct way to layer these styled ponents. If someone could share some insight, it would be much appreciated!

• javascript
• reactjs
• styled-ponents

Share Improve this question Follow asked Jan 30, 2019 at 2:20 Darius MandresDarius Mandres 92811 gold badge1616 silver badges3535 bronze badges 3

• Is styled even a function? Because you're calling it like it returns a function that you then call with some styles. – Jared Smith Commented Jan 30, 2019 at 2:26
• It is, if you want to pass it other ponents, and not html elements, where you do styled.div eg – Predrag Beocanin Commented Jan 30, 2019 at 2:27
• Notice how in App.jsx the Button and MainButton work fine. When they are imported in Banner.jsx however, it breaks. – Darius Mandres Commented Jan 30, 2019 at 2:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

So okay, this export convolution is the problem. You're importing a button from StyledComponents.jsx into App.jsx, which you then export as MainButton, and then import again into Banner.jsx, which is rendered in the LandingPage, which is rendered in the App.jsx. Whew. I literally solved this by just moving the MainButton definition and export into another file. I'm not sure why, but that's what it was. Keeping styled ponents in a dedicated files is a good idea! For example, moving the MainButton to a different file:

/StyledComponents/StyledComponents.jsx

export const MainButton = styled(Button)`
    //styles go here
`;

And then changing the import:

Banner.jsx

import { MainButton } from '../StyledComponents/StyledComponents';

works just fine!

In general, though, if you want to layer stuff with styled-ponents, I like to keep it in a single file. You don't have to export them all if you don't need all, but you also can:

const TitleBase = styled.h1`
  text-transform:uppercase;
  font-size: 1rem;
`;

export const GreenTitle = styled(Title)`
  color: green;
`;

export const RedTitle = styled(Title)`
  color:red;
`;

Just make sure they are in order. You can't define Title after RedTitle eg.

A small tip: it's also okay to use .js extension instead of .jsx, but you're free to do whatever you want!

I'm just getting into styled-ponents and am having a little bit of an issue. I'm trying to extend a button through different files and for some reason it imports as undefined

This error initially appeared with a NavLink ponent which led to believe it might be a react issue but it also happens with a styled.a``; so I don't think that's it.

StyledComponents.jsx

import styled from 'styled-ponents';

export const Button = styled.a`
  // general styling
`;

App.jsx

import { Button } from './StyledComponents/StyledComponents';

console.log(Button); // this works fine

export const MainButton = styled(Button)`
  // a little color and other styles
`;

Banner.jsx

import { MainButton } from '../App';

console.log(MainButton); // returns undefined

// if I omit the console logging above, this gives error of undefined
const _MainButton = styled(MainButton)`
  // specific styles for this ponent
`;

I am not really sure what is going on. I am also not sure if this is the correct way to layer these styled ponents. If someone could share some insight, it would be much appreciated!

I'm just getting into styled-ponents and am having a little bit of an issue. I'm trying to extend a button through different files and for some reason it imports as undefined

This error initially appeared with a NavLink ponent which led to believe it might be a react issue but it also happens with a styled.a``; so I don't think that's it.

StyledComponents.jsx

import styled from 'styled-ponents';

export const Button = styled.a`
  // general styling
`;

App.jsx

import { Button } from './StyledComponents/StyledComponents';

console.log(Button); // this works fine

export const MainButton = styled(Button)`
  // a little color and other styles
`;

Banner.jsx

import { MainButton } from '../App';

console.log(MainButton); // returns undefined

// if I omit the console logging above, this gives error of undefined
const _MainButton = styled(MainButton)`
  // specific styles for this ponent
`;

I am not really sure what is going on. I am also not sure if this is the correct way to layer these styled ponents. If someone could share some insight, it would be much appreciated!

• javascript
• reactjs
• styled-ponents

Share Improve this question Follow asked Jan 30, 2019 at 2:20 Darius MandresDarius Mandres 92811 gold badge1616 silver badges3535 bronze badges 3

• Is styled even a function? Because you're calling it like it returns a function that you then call with some styles. – Jared Smith Commented Jan 30, 2019 at 2:26
• It is, if you want to pass it other ponents, and not html elements, where you do styled.div eg – Predrag Beocanin Commented Jan 30, 2019 at 2:27
• Notice how in App.jsx the Button and MainButton work fine. When they are imported in Banner.jsx however, it breaks. – Darius Mandres Commented Jan 30, 2019 at 2:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

So okay, this export convolution is the problem. You're importing a button from StyledComponents.jsx into App.jsx, which you then export as MainButton, and then import again into Banner.jsx, which is rendered in the LandingPage, which is rendered in the App.jsx. Whew. I literally solved this by just moving the MainButton definition and export into another file. I'm not sure why, but that's what it was. Keeping styled ponents in a dedicated files is a good idea! For example, moving the MainButton to a different file:

/StyledComponents/StyledComponents.jsx

export const MainButton = styled(Button)`
    //styles go here
`;

And then changing the import:

Banner.jsx

import { MainButton } from '../StyledComponents/StyledComponents';

works just fine!

In general, though, if you want to layer stuff with styled-ponents, I like to keep it in a single file. You don't have to export them all if you don't need all, but you also can:

const TitleBase = styled.h1`
  text-transform:uppercase;
  font-size: 1rem;
`;

export const GreenTitle = styled(Title)`
  color: green;
`;

export const RedTitle = styled(Title)`
  color:red;
`;

Just make sure they are in order. You can't define Title after RedTitle eg.

A small tip: it's also okay to use .js extension instead of .jsx, but you're free to do whatever you want!

本文标签： javascriptstyledcomponent import results in undefinedStack Overflow