I am using antd and I wanted to override the select component. However, I am having a problem because it is being applied globally.
Here is my custom css.
customSelect.css
.ant-select-single.ant-select-show-arrow .ant-select-selection-item,
.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
padding: 0;
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item,
.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
padding: 0;
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item,
.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
font-size: 18px;
}
/* .ant-select-item {
padding: 0;
} */
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
height: 80px;
padding: 0px;
}
I've tried creating a custom component too.
CustomSelect.js
import { Select } from 'antd';
import React from 'react';
import './customSelect.css';
export default (props) => {
return (
<Select>
</Select>
);
};
and I want to use it on my component like this
MainComponent.js
import { Select } from 'antd';
import React from 'react';
import CustomSelect from '../components/CustomSelect/CustomSelect';
export default (props) => {
return (
<Select>
</Select>
<CustomSelect>
</CustomSelect>
);
};
Here is the class I'm trying to access
Related
How to style a styled component based on the class name it has. I found the following implementation through some blogs, but this isn't working. Can someone help me with this? I really appreciate any help you can provide.
import React from "react";
import { TiStarFullOutline } from "react-icons/ti";
import styled from "styled-components";
function StarRating() {
return (
<Star className="filled">
<TiStarFullOutline></TiStarFullOutline>
</Star>
);
}
export default StarRating;
//notworking
const Star = styled.div`
font-size: 2rem;
& .filled {
color: red;
}
`;
//working
const Star = styled.div`
color:red;
`
;
When accessing a child or a selector, you don'thave to use space. Below is an example:
const Star = styled.div`
font-size: 2rem;
&.filled {
color: red;
}
`;
Styled Components Documentation
I'm using version 2 of vue and #egoist/vue-emotion for styling my jsx components. I want to add a feature that user can change the background color of my application globally but I don't know how to do it.
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { styled } from '#egoist/vue-emotion'
import {CustomInput} from './components/CustomInput'
import { createGlobalStyle } from '#egoist/vue-emotion'
const Container = styled('div')`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
`
const GlobalStyle = createGlobalStyle`
body {
background: {{inputValue}};
}
`
#Component({
components: {
CustomInput,
Container,
GlobalStyle
},
})
export class App extends Vue {
inputValue = 'black'
render() {
return (
<div>
<GlobalStyle/>
<Container>
<CustomInput />
</Container>
</div>
)
}
}
I want you to help me that how can i access my data variable so when it changes I change my style state.
In the search area every time I type any letter the cursor moves out and I need to click the text area again to type the next letter. While using CSS it is working fine but in Styled components I am facing the issue. I think there is some issues with my styling but I am unable to debug. How can I fix this issue. Please help.
import React, { FC, useState, FormEvent } from 'react';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { setAlert } from '../store/actions/alertActions';
import { getWeather, setLoading } from '../store/actions/weatherActions';
interface SearchProps {
title: string;
}
const Search: FC<SearchProps> = ({ title }) => {
const dispatch = useDispatch();
const [city, setCity] = useState('');
const changeHandler = (e: FormEvent<HTMLInputElement>) => {
setCity(e.currentTarget.value);
}
const submitHandler = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
if(city.trim() === '') {
return dispatch(setAlert('City is required!'));
}
dispatch(setLoading());
dispatch(getWeather(city));
setCity('');
}
const Header = styled.h1`
font-size: 40px;
font-family: 'sans-serif';
padding-top: 30px;
`;
const Input = styled.input`
font-size: 18px;
padding: 10px;
margin: 10px;
background: #b4e6df;
border: none;
border-radius: 3px;
::placeholder {
color: black;
}
`;
const Button = styled.button`
background-color: #10e2f1;
font-size: 20px;
color: white;
margin: 1em;
border: 3px;
padding: 0.25em 6em;
`;
return(
<>
<Header >{title}
<form onSubmit={submitHandler}>
<Input
type="text"
placeholder="Enter city name"
value={city}
onChange={changeHandler}
/>
<br/>
<Button >Search</Button>
</form>
</Header>
</>
);
}
export default Search;
Looks like the value is changing (or refreshing) whenever you make a change in the input as it is bind with state and also the state is updating on onChange event. Keep independent value instead of state variable in value attribute. something like this:
const defaultValue = ''; // or the default value you are getting from props
const [city, setCity] = useState(defaultValue);
---
---
<Input
type="text"
placeholder="Enter city name"
value={defaultValue}
onChange={changeHandler}
/>
Let me know if it works or not.
I need some help. I am trying to style a screen header with an image in the background. But the background graphic is not styling properly, I have tried using both, Image and ImageBackground. The image should fit the width and should be in the background.
this is how it should look:
this is how it looks now:
when I set the width to 100% or to the width of the window this is what I get, The image gets cropped from the bottom:
Here is my code:
ArtistProfile.tsx
import React, { Component } from "react";
import { Content } from "native-base";
import styled from "styled-components/native";
import ScreenLayout from "../layout/ScreenLayout";
interface ArtistProfileProps {
componentId: string;
}
class ArtistProfile extends Component<ArtistProfileProps> {
render() {
return (
<ScreenLayout componentId={this.props.componentId}>
<ArtistProfileContent>
<HeaderBackground
source={require("../../assets/img/header-bg.png")}
/>
</ArtistProfileContent>
</ScreenLayout>
);
}
}
export default ArtistProfile;
const ArtistProfileContent = styled(Content)`
flex: 1;
`;
const HeaderBackground = styled.Image`
flex: 1;
align-self: center;
margin: 0;
padding: 0;
`;
ScreenLayout.tsx
import React, { Component } from "react";
import theme from "../../theme/Theme";
import styled, { ThemeProvider } from "styled-components/native";
import { Container } from "native-base";
import FooterNavigation from "../../components/footer/Footer";
interface ScreenLayoutProps {
componentId: string;
}
class ScreenLayout extends Component<ScreenLayoutProps> {
render() {
return (
<ThemeProvider theme={theme}>
<ScreenLayoutContainer>{this.props.children}</ScreenLayoutContainer>
<FooterNavigation componentId={this.props.componentId} />
</ThemeProvider>
);
}
}
export default ScreenLayout;
const ScreenLayoutContainer = styled(Container)`
flex: 1;
`;
Maybe you can set width like this
import {Dimensions} from 'react-native';
const windowWidth = Dimensions.get('window').width;
react native dimensions
You can set the width to '100%' in HeaderBackground component.
I have a component called LargeDialog which encapsulates a StyledDialogContent (both of which are from the Dialog class of the Material UI library).
LargeDialog.jsx
...
const StyledDialogContent = styled(DialogContent)`
padding: 30px;
`;
class LargeDialog extends Component {
...
render(){
return (<StyledDialogContent> ... </StyledDialogContent>) // Some content within.
}
}
...
The styled components adds a padding: 30px to the DialogContent.
I would like to override this with padding: 0px if the LargeDialog modal is reused in another place.
However, the generated webpack CSS has a random identifier i.e. MuiDialogContentroot-0-3-439 FullDialogModal__StyledDialogContent-ogd6um-6 iMpISc and I'm not sure how to target this.
AnotherComponent.jsx
import LargeDialog from './LargeDialog'
...
const LargeDialogWrapper = styled(LargeDialog)`
// What do I put here to override StyledDialogContent with a random identifier?
`;
class AnotherComponent extends Component {
}
...
I tried exporting StyledDialogContent and targetting it as such:
import LargeDialog, {StyledDialogContent} from './LargeDialog'
...
const LargeDialogWrapper = styled(LargeDialog)`
${StyledDialogContent} {
padding: 0px;
}
`;
But that didn't work too.
Example:
https://codesandbox.io/embed/styled-components-d5pzv?fontsize=14&hidenavigation=1&theme=dark
You target it within the style like so:
const Box = styled.div`
background-color: black;
height: 100px;
`;
const Yellow = styled.div`
background-color: blue;
height: 200px;
${Box} {
background-color: yellow;
}
`;
const App = () => {
return (
<>
<Box />
<Yellow>
<Box />
</Yellow>
</>
);
};
Refer to the related docs section.
If it helps, you can check this example file (note the Heading style for example).
An edit after OP question update
In your example, you missing className if you want to enable styling for your components.
Also, you need WrapperDiv to be a direct child, this is how the CSS works, remember that you writing simple CSS just in javascript:
class LargeDialog extends Component {
render() {
return (
<WrapperDiv className={this.props.className}>
<div>{this.props.children}</div>
</WrapperDiv>
);
}
}
const WrapperLargeDialog = styled(LargeDialog)`
${WrapperDiv} {
background-color: blue;
}
`;
// LargeDialog should be red.
// WrapperLargeDialog should be blue.
class App extends Component {
render() {
return (
<div>
<LargeDialog />
<br />
<WrapperLargeDialog>
<WrapperDiv />
</WrapperLargeDialog>
</div>
);
}
}