I am trying to understand a project and there I found an interesting way of applying styles to the component. I would like to know what are the advantages that one can get by using this type of styling.
**productRow.scss**
#price{
background-color:yellow;
}
productRow.js
import PropTypes from 'prop-types';
import React from 'react';
import {price} from '../styles/productRow.scss';//Here extracted price from the styles file
const ProductRow = ({data}) =>{
return(
<div>
<p >{data.name}-<span id={price}>{data.price}</span></p>
</div>
);};
ProductRow.propTypes = {
data: PropTypes.object,
ToggleDetails: PropTypes.bool
};
export default ProductRow;
Related
Like the title says, I have a problem with styled components. They do not want to render no matter what style attributes I add to them; they simply don't want to render. Does anyone know if I made a typo or something like that? This is the code I am working with.
import React from "react";
import styled from "styled-components";
const testStyled = styled.h1`
font-size:10px;
`;
export const Datepicker = () => {
return (
<div>
<testStyled>Test</testStyled>
</div>
);
};
Now this is how I am importing it into another component:
import React from "react";
import styled from "styled-components";
import {Datepicker} from "./Datepicker"
export const AnotherComponent = () => {
return (
<div>
<Datepicker></Datepicker>
</div>
);
};
Your problem here is that React components must start with a capital letter, even if they are styled components. You can read more about it here or here.
Your code should be like this
import React from "react";
import styled from "styled-components";
const TestStyled = styled.h1`
font-size:10px;
`;
export const Datepicker = () => {
return (
<div>
<TestStyled>Test</TestStyled>
</div>
);
};
React components use PascalCase: change testStyled to TestStyled.
const TestStyled = styled.h1`
font-size:10px;
`;
export const Datepicker = () => {
return (
<div>
<TestStyled>Test</TestStyled>
</div>
);
};
I need to export different components for the same page because they act just as configurations to render other components, I´m new to react so I struggling in finding the solution for this. Here is a codesandbox with a simple example of what I want to achieve: https://codesandbox.io/s/adoring-elion-fq4zt?file=/src/App.js
Thanks!
---- EDITED ----
Thanks for all the answers, thanks to that I realized I had a typo in the component naming, that's why my previous tries didn't work.
I leave here the updated codesandbox, since it might be useful for others:
To export more than one component in a module simply do the following:
export const ComponentOne = () => <span>Some content for ComponentOne</span>;
export const ComponentTwo = () => <span>Some content for ComponentOne</span>;
Then, when you need to import these components simply do:
import { ComponentOne, ComponentTwo } from "./path/of/components"
Please note that the import is with {} because the components are not exported as default.
On the other side, if you have only a component in your file you can simply do the following:
const Component = () => <span>Some content for Component</span>;
export default Component;
And than import as default, without the {} as in the following example:
import Component from "./path/of/components"
// component.js
export const someCom1 = () => {
return <div>Hello 1</div>
}
export const someCom2 = () => {
return <div>Hello 2</div>
}
// parent.js
import {someCom1, someCom2 } from './component.js'
in your page file remove "export" from the: export function componentOn
and keep at the button: export { ComponentOne, ComponentTwo };
to import it use: import {ComponentOne,ComponentTwo} from "./PageOne";
You can keep both components in a single wrapper like this
PageOne.js
import React from "react";
import ComponentOne from "./ComponentOne";
import ComponentTwo from "./ComponentTwo";
export default function PageOne() {
return (
<>
<ComponentOne title={"This is the title"} />;
<ComponentTwo description={"This is the description"} />;
</>
);
}
App.js
import React from "react";
import "./styles.css";
import PageOne from "./PageOne";
export default function App() {
return (
<div className="App">
<PageOne />
</div>
);
}
I have 4 sections in my homepage src/pages/index.js in order to make it tidy I want to break the section into 4 different components, let say src/components/foo.js src/components/bar.js src/components/baz.js and src/components/qux.js
src/pages/index.js
import React from 'react';
import {graphql} from 'gatsby';
import homeStyle from '../styles/homepage.module.scss'; // how to pass this style into Foo
import Foo from '../components/foo'
const HomePage = ({data: {ipsum}}) => {
return(
<div>
<Foo data={ipsum} />
</div>
)
}
export const loremQuery = graphql`
query {
ipsum: homepageYaml {
id
heading
}
}
`
export default HomePage
my question is how to pass/get homeStyle (css module) above into my component below, so i dont have to reimport the style on each component inside index.js
src/components/foo.js
import React from 'react';
const Hero = ({data}) => {
return(
<h1 className={?}>{data.heading}</h1>
)
}
export default Hero
I'm trying to use styled components to personalize a header component from semantic-ui-react.
I try:
header.jsx:
import React from 'react';
import { Header } from 'semantic-ui-react';
import TipografiaHeader from './cabecalho.css'
const HeaderPages = () => (
<div>
<TipografiaHeader as='h2'
textAlign='center'
>
Workout Log
</TipografiaHeader>
</div>
)
export default HeaderPages
cabecalho.jss.js:
import styled from "styled-components";
import { Header } from 'semantic-ui-react';
const TipografiaHeader = styled.Header`
background: red;
`;
export { TipografiaHeader };
But in the console i'm receiving:
Uncaught TypeError: _styledComponents2.default.Header is not a
function
The syntax for styled.element can only be used for HTML elements. For eg:
styled.h1``
For styling a custom component, the syntax to be used is:
styled(Header)``
Note that this custom component requires the className prop to be passed into the DOM element underneath for this to work.
Docs
I need to use react addons, ReactCSSTransitionGroup, but still I have error Uncaught TypeError: Cannot read property 'CSSTransitionGroup' of undefined.
I have react, react-dom and ReactCSSTransitionGroup v: 15.4.2, so shouldn't have problem with it. I have installed react-addons-css-transition-group via mpn.
import React, { PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
I add to webpack configuration
externals: {
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
but it didn't help
I use it in index.js (in Alert folder):
import React, { PropTypes } from 'react';
import BasicAlert from './basicAlert';
import {
alertsWrapper,
enter,
enterActive,
leave,
leaveActive,
} from './alertsHandler.scss';
import CSSTransitionGroup from 'react-addons-css-transition-group';
//const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
const AlertsHandler = ({ closeTime, alerts = [] }) => (
<div className={alertsWrapper}>
<ReactCSSTransitionGroup
transitionName={{
enter,
enterActive,
leave,
leaveActive,
}}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
{alerts.map(item => (
<BasicAlert
closeTime={closeTime}
{...item}
key={`alert${item.id}`}
/>
))}
</ReactCSSTransitionGroup>
</div>
);
AlertsHandler.propTypes = {
closeTime: PropTypes.number,
alerts: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
type: PropTypes.string,
alertContent: PropTypes.node,
repeated: PropTypes.number,
})),
};
export default AlertsHandler;
and import in App.js:
import React from 'react';
import Alert from '../components/Alerts';
var example = 'whatever';
export default class App extends React.Component {
render() {
return (
<div>
<Alert closeTime={3000} alerts={example} />
</div>);
}
}
I try to import: import React, { PropTypes } from 'react/addons'; and import { __Addons as addons, PropTypes } from 'react' but it give me error canno't read property addons of undefine. I even tryed to import directly from node_modules or use depreciate module react-addons.
I'm not sure, but I think there is problem with import react-with-addons, but I can't find properly way to do it.
If I gave to less information, please ask.
In my case, I was using a className prop on my CSSTransition component. It should be classNames. Spent hours figuring that out... just posting in case it helps somebody.
ReactCSSTransitionGroup is not a export from the main React package.
Just remove the third line const ReactCSSTransitionGroup = ....
import React, { PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
This should work
Update 1:
Subsequent error being thrown can be resolved like so
In index.js (in Alert folder):
import React, { PropTypes } from 'react';
...
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
//const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
const AlertsHandler = ({ closeTime, alerts = [] }) => (
<div className={alertsWrapper}>
<ReactCSSTransitionGroup
...
</ReactCSSTransitionGroup>
</div>
);
...