I am a bit puzzled when following the documentation here. Everything seems to work other than the headerStyle attribute. It doesn't seem to be applying to styles that I apply to it. I'm not sure where I am going wrong.
Checking CodeSandbox from one of the examples provided headerStyle works. Where else can I check to understand what is causing this issue?
Localhost:
Codesandbox:
Not sure where your problem lies, as I'm not getting the same warning (when using headerStyle), but here's a working example -- make sure to import the ant design css, otherwise, the ant components won't work as intended. Also, I find it easier and cleaner to override ant's css via overriding their respective class names in a separate css file, rather than overriding styles -- especially when overriding more than css property.
index.js
import React, { Component } from "react";
import { render } from "react-dom";
import { Drawer, Button } from "antd";
import "antd/dist/antd.css";
import "./index.css";
class App extends Component {
state = { visible: false };
showDrawer = () => {
this.setState(prevState => ({
visible: !prevState.visible
}));
};
render() {
return (
<div>
<Button type="primary" onClick={this.showDrawer}>
Open
</Button>
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={this.showDrawer}
visible={this.state.visible}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</div>
);
}
}
render(<App />, document.getElementById("container"));
index.css
.ant-drawer-header {
background-color: #5340ff;
border-radius: 0;
}
.ant-drawer-title {
color: #fff;
}
.ant-drawer-body {
background-color: #5340ff;
color: #fff;
height: calc(100vh - 55px);
}
Related
I am trying to use #emotion/styled. But, I cannot get the components to render on the screen, whereas if I am using the HTML element it is working fine.
import styled from "#emotion/styled";
export const Button = styled.button`
color: red;
background-color: green;
`;
import { Button } from "../styles/Button";
const Test = () => {
return (
<div>
<Button>Hello</Button>
</div>
);
};
export default Test;
Does anyone has any idea where things are going wrong?
It is working in my sandbox here
sandbox
import "./styles.css";
import styled from "#emotion/styled";
const Button = styled.button`
color: red;
background-color: green;
`;
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Button>Hello</Button>
</div>
);
}
try to import this on top of your component where you use emotion css.
This fixed my problems with not loading emotion css. Cheers!
/** #jsxImportSource #emotion/react */
You can use styled with css function to make a new component by updating some styles of existing component.
import styled from "#emotion/styled";
import { css } from "#emotion/react";
import { Button as MUIButton } from "#mui/material";
export const Button = styled(MUIButton)(
css({
backgroundColor: "green",
color: "red",
})
);
I am wishing to add a gradient to a landing page image.
I see examples in CSS using background (Example) but I am curious if it is possible to add it inline.
I appreciate any critiques, thank you!
import React from 'react';
import city from '../images/city-buildings.jpg'
function Home() {
return (
<div className='home'>
<img
src={city}
alt="city buildings looking up"
width="100%"
height="100%"
backgroundImage="linear-gradient(to right, #4880EC, #019CAD)". <------------- this line
/>
</div>
);
}
export default Home;
To apply a linear gradient over an image this code worked for me:
Component
import React, { Component } from 'react';
import city from '../images/city-buildings.jpg'
const style = {
width: '100%',
height: '100%',
opacity: '0.8'
}
export default class MyComponent extends Component {
render() {
return (
<div className="home">
<img
src={city}
style={style}
alt="city buildings looking up"
/>
</div>
)
}
}
Component.css
.home {
background: linear-gradient(#e66465, #9198e5);
}
I am using styled components and Material UI and I can't figure out how to add on hover styles the MuiButton children. I've searched online and followed some of the docs, but I cannot seem to get it to take. I have my jsx setup like so:
<StyledMuiButton onClick={() => ()}>
<Svg />
<MuiTypography color={Color.gray} variant="caption">
Text
</MuiTypography>
</StyledMuiButton>
and the styled component set up like so:
const StyledMuiButton = styled(MuiButton)`
&& {
& .MuiButton-label {
flex-direction: column;
}
&:hover ${MuiTypography} {
color: ${Color.primary};
}
}
`;
Can anyone point me in the correct direction
Here's an example showing a couple ways of targeting elements within a button:
import React from "react";
import Button from "#material-ui/core/Button";
import Typography from "#material-ui/core/Typography";
import DoneIcon from "#material-ui/icons/Done";
import styled from "styled-components";
const StyledButton = styled(Button)`
& .MuiButton-label {
display: flex;
flex-direction: column;
}
&:hover {
color: red;
.MuiSvgIcon-root {
background-color: blue;
}
.MuiTypography-root {
color: green;
&:nth-of-type(2) {
color: purple;
}
}
}
`;
export default function App() {
return (
<div className="App">
<Button>Default Button</Button>
<StyledButton>Styled Button</StyledButton>
<StyledButton>
<DoneIcon />
<span>Styled Button</span>
<Typography>Typography 1</Typography>
<Typography>Typography 2</Typography>
</StyledButton>
</div>
);
}
This leverages the global class names applied to the elements which are documented in the CSS portion of the API page for each component (for instance the Typography documentation is here: https://material-ui.com/api/typography/#css). As a general rule the top-most element within a Material-UI component can be targeted via MuiComponentName-root (e.g. MuiTypography-root for Typography).
I am a beginner to CSS-in-JS and emotion, and trying to port a sass react app to emotion. Right from the start I already have the issue of not knowing how to style the body tag.
Do people generally use document.body.style to do this? I can't find this covered anywhere ...
Suppose I want to port following code to emotion, how would that be accomplished?
$bodyFillColor: rgb(218, 236, 236);
body {
margin: 0;
padding: 0;
min-height: 100vh;
max-width: 100vw;
background-color: $bodyFillColor;
.noScroll {
overflow: hidden;
}
}
Have any best practices evolved yet that cover this?
With Emotion you can set something up, like the following create-react-app example, to inject global styles:
import React from 'react';
import ReactDOM from 'react-dom';
import { Global, css } from '#emotion/core'
const bodyFillColor = `rgb(218,236,236)`;
class App extends React.Component {
render() {
return(
<div>
<Global
styles={css`
body {
background: ${bodyFillColor};
margin: 0;
padding: 0;
min-height: '100vh';
max-width: '100vw';
}
`}
/>
<Global
styles={{
'body.noScroll': {
// Prevent scrolling; conditionally activate this
// in subcomponents when necessary ...
overflow: 'hidden',
},
}}
/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
This shows an example of injecting a style on the body and also assigning a class to the body that can conditionally be activated later on.
eg.
{this.state.activate && <Global styles={{`stylesetc`}}/>}
https://emotion.sh/docs/globals
Alternative
StyledComponents uses a CSS-in-JS approach and works great with React applications. This is a technique I've used in the past straight from the documentation:
import { createGlobalStyle } from 'styled-components'
const GlobalStyle = createGlobalStyle`
body {
color: ${props => (props.whiteColor ? 'white' : 'black')};
}
`
// later in your app
<React.Fragment>
<Navigation /> {/* example of other top-level stuff */}
<GlobalStyle whiteColor />
</React.Fragment>
If you're using react application you can create index.css file and set your wanted properties for the body. Then you must import the index.css file in your index.js file and the changes will take place.
As per the question if the task is as small as changing body's background color in js then below approach can also be followed any where in your code most probably in App.js
if(theme==='dark')
document.body.style.background = '#000'
else
document.body.style.background = '#FFF'
No need to use a whole styling library for it.
Also i tried editing document.body.style, you can try that too according to below example
if(theme==='dark')
bgColor = '#000'
else
bgColor = '#FFF'
document.body.style= `background: ${bgColor}`
Remember following 2nd approach you may overwrite whole body style so please take care of that.
I hope this helps :)
I can't seem to style a PrimeReact component with styled-component.
Given the below code to render an InputText, my intention is to change the width of it. But it doesn't work.
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<InputText/>
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
styled-components generates a className that should be passed to the component.
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<InputText className={this.props.className} /> <---- here
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
If InputText doesn't accept className, you can simply wrap it with another component:
import styled from "styled-components";
import {InputText} from 'primereact/components/inputtext/InputText';
class Component extends React.Component {
render() {
return (
<div className={this.props.className}> <---- here
<InputText />
</div>
)
}
const ComponentView = styled(Component)`
.ui-inputtext {
width: 1000px;
}
`;
PrimeReact has a lot of styles applied with a separate sass stylesheet, often combining multiple classnames and html tags.
To get your styles to win, you need more CSS specificity.
A solution is to use a nested selector, like:
const ComponentView = styled(Component)`
&&& {
width: 1000px;
}`
This will generate 3 identical classnames and is recommended by the Styled Components docs. More classname specificity needed? Use more &s.
Or you could put in a !important. I've seen this around.
Or edit their sass file.