i was scratching my head from the last 2 hours that why this 3 rd party styled component is not adding i it .have a look
import React from 'react';
import styled from 'styled-components'
const StyleDiv =styled.div`
#media(max-width:600px){
body{
background-color: red;
}
}`
const Person= (props)=>{
return <StyleDiv>
<h1 onClick={props.click}>i am {props.name} and {props.age} years old as you know me as {props.children} </h1>
<input type="text" onChange={props.changed} />
</StyleDiv>
}
export default Person;
If you put selectors within the template string without the ampersand, they will refer to children of the component. https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting
Basically you can't select body within your div and you probably shouldn't.
you cannot apply global styles like this to a component, for applying global styles (i.e. styles to body, html etc.) styled-components gives a createGlobalStyles utility, it can be used like this:
import { createGlobalStyles } from 'styled-components';
const GlobalStyles = createGlobalStyle`
#media (max-width: 600px) {
body {
background-color: red;
}
}
`;
// Render GlobalStyles to the root lvvel of your app
ReactDOM.render(
<>
<GlobalStyles />
<App />
</>,
document.getElementById('root');
);
Hope it helps :)
Related
we are currently loading Fonts and few other global styles like this:
import { createGlobalStyle } from 'styled-components';
export default createGlobalStyle`
#font-face {
font-family: 'Name';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/name/v12/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFU0U1Z4Y.woff2) format('woff2');
}
// more fonts..
}
And in every _app.tsx (from every project in repo) we just
import GlobalStyle from #our-company/ui;
// few other imports
const AppProviders = ({ children, messages, locale }: Props): JSX.Element => {
return (
<IntlProvider
locale={locale || 'en-GB'}
key={locale}
messages={messages[locale]}
defaultLocale="en-GB"
>
<GlobalStyle />
<DsThemeProvider
locale={locale}
>
{children}
</DsThemeProvider>
</IntlProvider>
);
};
But we noticed unnecessary font reloads caused by this GlobalStyle when clicking, for example, in checkbox elements (tried putting this in a .css and just load it and never happens again).
Any idea how could export this styles as GlobalStyle name without using styled-components so we don't have to change all import from all apps in the project?
why you dont create main.css and import it on your index.css or app.css , its download and cache on users browser so you don't need to use global styled component anymore
It seems like you're looking for something like injectGlobal:
import { injectGlobal } from 'styled-components';
injectGlobal`
/* your #font-face stuff here */
`
This seems like it would be a good fit for your situation, as it would be relatively easy to transition from the existing structure using createGlobalStyle to one that uses this.
In your case, the code would look like:
import { injectGlobal } from 'styled-components';
injectGlobal`
#font-face {
font-family: 'Name';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/name/v12/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFU0U1Z4Y.woff2) format('woff2');
}
// more fonts..
}
If you wish to use a solution that is backwards-compatible with any code that is rendering <GlobalStyle />, you can include a null component as the default export as a stop-gap solution, alongside your injectGlobal code:
export default () => null;
Would this solve your problem?
You can also bind the style directly inside the JS file
var stylingObject = {
div: {
color: "red",
border: "1px solid red"
}, input: {
margin: "2px",
padding: "5px"
}
}
function App() {
return (
<div style={stylingObject.div}>
<input style={stylingObject.input} type="text" />
</div>
);
}
Originally I had hoped to import some CSS file with the fonts defined there and then just importing it so it would affect the entire page, obviously because the way react works such a thing isn't possible cause it would take place only in the imported component not in the one that did the import.
the reason createGlobalStyle from styled-components renders each time is also due to react's workings - when we set the style for a "component like" (or actual component) object, like every react component its not static and renders only when needed. Even if we make it render by force on page load its not the same one (cause on each page we render it separately) so keeping up with the current config doesn't seem to be possible by react's standard.
If we want to make the styles static or "more" static we would have to :
either import them in each page separately - making us do a major refactor
or use either createGlobalStyle (allowing us to use our already created styled-components component) or importing a main css file in the main application component like in the example below:
globalStyles.js
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
background: teal;
font-family: Open-Sans, Helvetica, Sans-Serif;
}
`;
export default GlobalStyle;
App.js
import React, { Fragment } from 'react';
import GlobalStyle from './theme/globalStyle';
import Content from './components/Content';
function App() {
return (
<Fragment>
<GlobalStyle />
<Content />
</Fragment>
);
}
export default App;
If you have a rather large global stylesheet like we did while migrating, you can use styled-components css method to leverage styled-components (css) IDE syntax highlighting & linting you can also do the following:
import React from 'react'
import { createGlobalStyle, css } from 'styled-components'
const Reset = css`
* {
box-sizing: border-box;
}
`
const Accessibility = css`
.hidden {
display: none !important;
visibility: hidden;
}
`
const BaseStyles = createGlobalStyle`
${Reset};
${Accessibility};
`
export const GlobalStyles = () => (
<>
<BaseStyles />
</>
)
Import GlobalStyles and render as sibling to {children}
I thought this was possible with styled components
Using the first styled Component Block as the bases for another component like
export const BlockOne = styled.Block
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import styled from 'styled-components'
export const Block = styled.div`
width: 100px;
height: 100px;
background: red;
`
export const BlockOne = styled.Block`
background: yellow;
`
const App = () => {
return (
<div>
<Block/>
<BlockOne/>
</div>
);
}
render(<App />, document.getElementById('root'));
Is there a way to do this
Yes, like this
export const BlockOne = styled(Block)`
background: yellow;
`
styled-component only has basic components (tags such as div, span, etc.) as attributes. For anything else, you pass it as a prop.
If you pass a custom component to it, make sure that it accepts a className and that it passes it down to a div or something:
const MyComponent = ({className}) => {
return <div className={className}></div> // styled-component will use this classname to apply the style
}
export const MyStyledComponent = styled(MyComponent)`
background: yellow;
`
Else it would have no effect.
I have a component with its own styles:
import styles from './componentA.module.scss';
componentA.module.scss:
.A { color: green;
background: white;
font-size: 1rem;}
ComponentA.js
....
return(
<div className={styles.A}>{props.children}</div>
)
I have a ComponentB.js. In this component B I need the component A, but I need to overwrite the style color.
ComponentB.js
...
import ComponentA from './../componentA';
import styles from 'componentB.module.scss';
...
return(
<ComponentA />
)
but I want in the component B overwrite the color to the class .A. I tried in componentB.module.scss to do it and it doesn't change.
componentB.module.scss
.A {
color: red !important;
}
and it doesn't work I want to be able to overwrite the styles depending on the component that is wrapped. How can I do it? Thanks.
You have to pass Component A styles by the props and then apply to the wrapper div
const ComponentA = (props) => {
return(
<div className={styles.A} styles={props.cssStyles}>{props.children}</div>
)
}
And then
import ComponentA from './../componentA';
import styles from 'componentB.module.scss';
...
return(
<ComponentA cssStyles={{color: "red"}} />
)
You can also pass classnames as props and then merge default classnames and props classnames by this package https://www.npmjs.com/package/classnames
I would like to pass a custom prop (exactly: theme name as string) to each passed styled component through Provider, so it was available throughout the css definition.
ThemeProvider almost does it, but it expects object, not the string. I do not want to pass whole object with theme settings, just the name of my theme.
I do not want to use special theme prop or similar, because then I would have to it manually every single time I create new styled component. Provider seems like the best option if only it cooperated with string.
Is there any possibility to pass a string through Provider to Consumer builded in styled components?
EDIT:
[PARTIAL SOLUTION]
I found what I was looking for when I realized styled-components exports their inner context. That was it. Having access to pure react context gives you original Provider, without any 'only objects' restriction ('only objects' is a styled-components custom provider restriction).
Now I can push to each styled component exactly what I want and if I want.
import styled, { ThemeContext } from 'styled-components';
const StyledComponent = styled.div`
color: ${props => props.theme == 'dark' ? 'white' : 'black'};
`;
const Component = props => {
const theme = 'dark';
return (
<ThemeContext.Provider value={theme}>
<NextLevelComponent>
<StyledComponent />
</NextLevelComponent>
</ThemeContext.Provider>
);
};
Hope I have this correct, from what I've been able to glean. I haven't tried this out but it seems it might work for you. This is lifted directly from the reactjs.org docs regarding context. It passed the string name of the theme down.
const ThemeContext = React.createContext('green');
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="blue">
<SomeComponent />
</ThemeContext.Provider>
);
}
}
function SomeComponent(props) {
return (
<div>
<OtherComponent />
</div>
);
}
class OtherComponent extends React.Component {
static contextType = ThemeContext;
render() {
return <ThirdComponent theme={this.context} />
}
}
I hope this helps you understand the idea behind ThemeContext from styled-components. I've passed string "blue" to ThemeContext just to show, that it should not be object and you can use just string.
import React, { useContext } from "react";
import ReactDOM from "react-dom";
import styled, { ThemeContext } from "styled-components";
// Define styled button
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
color: ${props => props.theme};
border: 2px solid ${props => props.theme};
`;
// Define the name of the theme / color (string)
const themeName = "blue";
const ThemedButton = () => {
// Get the name from context
const themeName = useContext(ThemeContext);
return <Button theme={themeName}>Themed color: {themeName}</Button>;
};
function App() {
return (
<div className="App">
<ThemeContext.Provider value={themeName}>
<ThemedButton />
</ThemeContext.Provider>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Demo: https://codesandbox.io/s/styled-components-example-with-themecontext-cso55
I need to add sass variable to styled components in react js ,I have go through this link Sass-extract-js and i have followed their procedure.
but i'm stuck in this line
import styled from 'styled-components';
const Button = styled.button`
background-color: ${p => p.theme.primary} //explain this line
`;
I have created var.scss file and contains
$black:#000000;
$white:#ffffff;
$red:#f64406;
$gray:#333333;
$green:#3bbd47;
In my render
<div>
<div>
<h2>Welcome Back!</h2>
<h3>Login Your Account</h3>
</div>
Styled component
const Content = styled.div`
h1:${}//how i can get variable here
`;
This can be achieved by using theming in the styled-components. You can add variables to ThemeProvider as follows:
const theme = {
black:#000000,
white:#ffffff
red:#f64406
gray:#333333,
green:#3bbd47
}
<ThemeProvider theme={theme} >
<App />
</ThemeProvider>
and then this object can be used in the styled-components
const BlackDiv = styled`
color: ${(props) => props.theme.black}`;
For more info please check theming