I have a child component. I want to bind inline style into that component. I want to pass these style properties( height: 200px; overflow-y: scroll).
I have tried by passing like this:
<Childcomponent style="height: 200px; overflow-y: scroll;" /> but not working.
Then i have tried like this:
<Childcomponent :style="{'height': '200px'; 'overflow-y': 'scroll'}" /> it is also not working.
How to bind inline style to this child component?
Yo can do following:
<div style="height: 200px; overflow-y: scroll;">
<Childcomponent />
</div>
If you want it to be done in your way, you have to create prop in your component, pass styles into it and then apply those on tag inside of your component.
Like that:
In Childcomponent file add
prop {
myStyles: String;
...
}
Those styles you will use in tag you want (I believe, in root one).
Then you can pass styles from parent in this way:
<Childcomponent my-styles="height: 200px; overflow-y: scroll;"/>
Related
Is it possible to localize the global styles of a module to only one file?
for instance, I would like to change the width of an item from a react module but only for one file. inline styles aren't possible :/
edit for context: in my particular case ... i'm using 'react-multi-carousel' ... and to go over the breakpoint behavior, I've set .react-multi-carousel-item { width: 310px !important; } . However i'd like this style to be applied only to one component and not my entire project (I'm using the carousel in more than one place). Any way to localize a global style (CSS file)?
You just nest the CSS rule to only apply when inside a specific container:
.my-container .react-multi-carousel-item { width: 310px !important; }
And then in React:
return <>
<MultiCarousel />
<div className="my-container">
<MultiCarousel />
</div>
</>
In that example the first <MultiCarousel /> would not see the extra style, but the second one would.
"is there any way to add css within the TSX file by any chance? If possible, I'd like to not have an external css file."
You could try a scoped style tag
For example:
return <>
<div>
<style scoped>{`
.react-multi-carousel-item {
width: 310px !important;
}
`}</style>
<MultiCarousel />
</div>
</>
I have a main component on every page, which is Navbar, and I have another component, which is a page to contact us. I want to make a background for a component that contact us, but it does not affect the Navbar? Also, if I give body tag the background image, all the other components will take the same background as the photo cuz i give it to the body! what i can do in this case?
You have to wrap each component in a different div.
<div>
Navbar
</div>
<div style={{backgroundColor: 'color here'}}>
Contact us
</div>
Style inside the div or add a className and style in a separate file with CSS:
<div className="yourClass">
Contact us
</>
and in a separate .css file:
.yourClass {
background-color: 'color name';
}
Simple HTML question, just apply the class to only one of your elements, and don't have them nested.
<containing-element>
<navbar />
<contact-page className="contact" />
</containing-element>
You can then style .contact
.contact {
background-color: #FF0000;
}
I am going to create a layout like 'header sidebar main-content sidebar footer ' with flexbox by Vuejs.
I created separate .vue files for each part of the layout , I mean something like a sidebar.vue and a header.vue and so on ....
And I am going use them in App.vue file like :
<template>
<div id="app">
<app-header ></app-header>
<app-sidebar></app-sidebar>
<app-content></app-content>
<app-sidebar></app-sidebar>
<app-footer></app-footer>
</div>
</template>
<script>
import header from "./components/header";
import sidebar from "./components/sidebar";
import content from "./components/content";
import footer from "./components/footer";
export default {
components: {
"app-header": header,
"app-sidebar": sidebar,
"app-content": content,
"app-footer": footer
}
};
</script>
<style lang="scss">
body {
margin: 0;
padding: 0;
}
#app {
border: 3px solid red;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
> * {
border: 1px solid black;
}
}
the main problem is I can not select these custom nested components from App.vue file to style them. for example i can not use app-header{} like other normal tags in html and css to select it and style it within style tags inside of App.vue file . is there anyway to solve it ?
NOTE : I know I can assign a class to each of these nested components and then select them to use with css class selector .
I would handle this by creating a property in each of the child components (maybe HeaderClass, BodyClass, and so on). That way, any component that consumes these child components can pass whatever classes they desire and style them accordingly.
<app-header :headerclass="parent-header-class"> </app-header>
Inside of your child component, you can use these properties and v-bind the class inside the HTML, as shown in the example below:
<template>
<div :class=`${headerClass} internal-class-example button`> </div>
</template>
Note: This does not allow you to use any scoped parent CSS to pass to the child. The classes you pass down must be global. Otherwise, the child component will not know what it is.
I'm using a third party reactjs component called react-syntax-highlighter and I want to develop a logging feature that tracks users' scrolling behavior for research purposes.
However, since I'm using a third party component like this:
<div className={this.props.className}>
<SyntaxHighlighter language= {supportedLanguages.includes(this.state.language)
? this.state.language : null}
style={androidstudio} showLineNumbers={true}
lineNumberStyle={lineNumberStyle}>
{this.props.fileName ? this.state.code : 'Select a file'}
</SyntaxHighlighter>
<div className="select-language input-field">
{languageSelection}
</div>
</div>
I'm not sure how to add a hook to track the scrolling event on this component from the outside. Can someone help me take a look please? Thank you!
You can specify height for the SyntaxHighlighter component, then add overflow-y: scroll. Finally, add onScroll event listener to SyntaxHighlighter:
<SyntaxHighlighter
className={"class1"}
onScroll={() => console.log("scrolled")}
language="javascript"
>
{'code string'}
</SyntaxHighlighter>
class1 CSS:
.class1 {
height: 100px;
overflow-y: scroll;
}
Here is a working example (open console at the bottom to see the result):
https://codesandbox.io/s/jj16m0nqm5
I would like to know what can potentially cause styled-components to not inject all the neccessary css into a page's header.
I have declared a super simple button in an existing project like so:
const Button = styled.button`
background-color: ${props => props.disabled ? "red" : "blue"}
`
And used it like so:
render() {
return (
<div>
<input value={this.state.value} onChange={this.changeValue} />
<Button disabled={this.state.value === "123"}>Button</Button>
</div>
);
}
The problem is the button will display as expected on load (eg. red) but it doesn't have the blue style when the state changes.
Looking at the generated html, this is caused by the 'blue' style (.hqrbog) not injected into the header
<style type="text/css" data-styled-components="jiLefI" data-styled-components-is-local="true">
/* sc-component-id: sc-bdVaJa */
.sc-bdVaJa {}
.jiLefI{background-color:red;}
</style>
<div data-reactroot="">
<input value="12" class="drop-val">
<button class="sc-bdVaJa hqrbog">Button</button>
</div>
When I put these code in a new app created with create-react-component, everything works. But they just dont work in this existing project.
I'm wondering what can cause styled-component to not inject css insto the header properly? I'm suspecting its something to do with how the webpack or babel is set up but I don't know where to start.
Try to rename your attribute from disabled to something else.