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.
Related
The component JobList looks great in the HomePage component. Here's how it looks :
HomePage Component
And here's the code:
import React from 'react'
import { Main } from './Main'
import JobList from './JobList'
import styled from 'styled-components'
import MainNavbar from './MainNavbar'
import './HomePage.css'
const Container = styled.div`
display: flex;
flex-direction: column;
`
const MainContainer = styled.div`
display: flex;
`
const HomePage = () => {
return (
<Container>
<MainNavbar />
<MainContainer>
<JobList />
<Main />
</MainContainer>
</Container>
)
}
export default HomePage
But when I import the JobList component in the JobDetailsMain component, it looks a lot different.
JobDetailsMain
And here's the code :
import React from 'react'
import JobList from '../StartingPage/JobList.jsx'
import MainNavbar from '../StartingPage/MainNavbar.js'
import styled from 'styled-components'
import JobDetails from './JobDetails.jsx'
import './JobDetailsMain.css'
const Container = styled.div`
display: flex;
flex-direction: column;
`
const MainContainer = styled.div`
display: flex;
`
const JobDetailsMain = () => {
return (
<Container>
<MainNavbar />
<MainContainer>
<JobList />
<JobDetails />
</MainContainer>
</Container>
)
}
export default JobDetailsMain
The CSS files in the components only include a margin and padding set to 0 in the body. Also I did try to make the JobList have a margin left set to 0 in order for it to look similar to the HomePage component but then it increased in width and when I try adjusting the width it starts to cover my main component.
Here's how it looked when I gave it a margin left set to 0:
Margin Left
And the code :
const Container = styled.div`
display: flex;
flex-direction: column;
`
const MainContainer = styled.div`
display: flex;
`
const JobListContainer = styled.div`
margin-left: 0;
`
const JobDetailsMain = () => {
return (
<Container>
<MainNavbar />
<MainContainer>
<JobListContainer>
<JobList />
</JobListContainer>
<JobDetails />
</MainContainer>
</Container>
)
}
And yeah adjusting the width positions the component somewhere else or covers the JobDetails component. So yeah why is this happening and how do I fix this ?
Heres the code for JobDetailsMain.css
body {
margin: 0;
padding: 0;
}
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
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 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 have a simple React App, using Redux's Provider to wrap my App component.
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
import registerServiceWorker from './registerServiceWorker';
const MainContainer = styled.div`
margin: 0;
padding: 0;
height: 100vh;
background-color: red;
`;
ReactDOM.render(
<MainContainer>
<Provider store={store}>
<App />
</Provider>
</MainContainer>,
document.getElementById('root'),
);
registerServiceWorker();
However, when this app renders, there's a white gap around the edge (all sides) of the screen. What's the correct way to override the body tag so that the App content goes to the edge of the screen?
That's the default styling of your browser. You could use something like Normalize.css, or simply remove the margin and padding of the body yourself.
body {
margin: 0;
padding: 0;
}
You can do this with injectGlobal.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;
Thanks for the answers, but I was looking for a Styled Components specific answer.
Turns out that Styled Components has a helper method, injectGlobal, which can override the global body tag.
Using this, one can set the desired properties – in this case, no margin / padding. So, adding the following to index.js solves the issue.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;
For styled components v4 and onwards use createGlobalStyle instead:
import { createGlobalStyle } from "styled-components"
const GlobalStyle = createGlobalStyle`
body {
color: red;
}
`
// later in your app's render method
<React.Fragment>
<Navigation />
<OtherImportantTopLevelComponentStuff />
<GlobalStyle />
</React.Fragment>
Styled Components FAQs
In your "App.css" write this :
body {
overflow-y: hidden;
}
That's working for my home page.