I'm trying to read the Jumbotron's height.
In order to do that, I followed this answer.
The only difference is that I'm applying the ref to a Reactstrap Jumbotron.
So I added this code:
<Jumbotron
className="test"
ref={ (divElement) => this.divElement = divElement}
>
The result is this:
Warning: Stateless function components cannot be given refs. Attempts
to access this ref will fail.
How should I overcome this problem?
I just ran into this same issue, the problem is that ReactStrap uses functional components to render tags so you can't use refs on them. Just convert your jumbotron into a div without using react strap and it will work.
<div className="jumbotron" ref={this.divElement}></div>
Related
I am trying to change my website to make color palette swapping easier, as we are still trying to find colors that work still. We are using Vue and Vuetify with SCSS generating our main CSS file. We are using almost exclusively Vue SFCs. I am currently stumped by a V-Tab issue where the "active" bar underneath won't change color.
The main issue is that, when using Vuetify components, in-file CSS has little impact. When I pass color="#ffffff" as a prop, it works wonderfully, everything is great. However, I cannot use CSS to change the colors in the same way at all (the produced code actually has the bar in a different div outside of the tab element).
I have tried overwriting the v-tabs-slider-wrapper element style every which way I could think of, to no avail
I have tried using SCSS functions inside the computed section of the SFC
I have tried basic CSS and SCSS
I have tried v-binding the color attribute to a computed function that referenced the SCSS function
I have tried using classes, ids, names, etc.
I tried background-color in all iterations as well, as a hope
If any one can help me, I'd appreciate it.
<template>
<v-tabs class="tabs">
<v-tab>Thing</v-tab>
<v-tab-item>Inner Thing</v-tab-item>
</v-tabs>
</template>
<script>
export default { };
</script>
<style lang="scss" scoped>
#import "../styles/main.scss";
.tabs div {// this was the only way to get the tab **text** to change, doesn't work for the slider bar
color: getColor_fromText("color"); //defined in main.scss
}
</style>
Did you try the color property of the slider?
<v-tabs-slider color="yellow"></v-tabs-slider>
Example here:
https://vuetifyjs.com/en/components/tabs/#custom-icons
If you want to change the background color of a specific tab you could try something like this:
<v-tabs
:background-color="activeTab === highlightTab ? 'deep-purple accent-4' : ''"
v-model="activeTab"
>
See full example (click on the second tab):
https://codepen.io/DomHaas/pen/qBZrZVy
I am getting above error in my react project when chrome version is updated to 74 (latest version).
The root cause of this issue is described here. Essentially this happens when you pass style property of some elemnt as string or array. Like style="string" or style={[array]}. This may seem not relevant (I don't think that someone intentionally try to send string or Array to style property), but in my case this was root cause.
To find error I recommend to carefully investigate your code with debugger in Chrome or other browser.
Below is example of my error
I erroniously set styles.radioButton (which is used as value for style property for some element) using spread operator ...spacing.xxSmall, but spacing.xxSmall is just a string and spreaded to array with chars as array members. Previously properties with indexes (0, 1, 2, ...) of style has been ignored, but now site is crushed.
I work with Angular libraries and some of them does not support inline styles now (for me it was ngx-avatar and it not working on Firefox and chrome: 74)
before:
<ngx-avatar style="border-radius="50%"></ngx-avatar>
after:
<ngx-avatar [style.border-radius]="'50%'"></ngx-avatar>
I think you can try the same for React.
In my RN Expo Web application I was getting this error while doing something like
style={{ padding: 5, ...props.style }}
I Realized that passing prop named "style" and then using it as inline style was causing this error. What resolved it for me was using a different name for the prop and doing something like ...
style={{ padding: 5, ...props.listSectionStyle }}
Merely changing prop name from 'style' to anything else like 'listSectionStyle' (or any of your choice) should resolve if it is due to above stated reason.
Ref: link shared by Fyodor in his reply helped understand the real issue.
I was getting this error with prime ng's <p-skeleton>. What I was doing is passing a style directly to the skeleton like below:
<p-skeleton width="97.5%" height="20rem" style="margin-bottom: 2rem;"></p-skeleton>
So instead of using style directly I used the class property to give the margin bottom (my class was already defined). This removed the error for me. And updated line is as follows:
<p-skeleton width="97.5%" height="20rem" borderRadius="16px" class="mb-40"></p-skeleton>
For Expo/RN
You're probably giving an array of malformed stylesheets this way:
<compo style={[foo, biz, bar]} />
What you need to do is flatten your stylesheets:
import * as Native from 'react-native';
<compo style={Native.StyleSheet.flatten([foo, biz, bar])} />
I'm using Rails 5.1.1, RSpec 3.5.0 & Capybara 2.7.1.
I want to have a test that checks for a navbar on the home page, according to some documents that I've found I should be using have_css for this. The example given is:
have_css("input#movie_title")
My understanding is that this would look for an input tag with an id of movie_title. Is that correct?
I'm trying this in my code:
have_css("div.navbar-default")
I get this error, however:
Failure/Error: expect(page).to have_css("div.navbar-default") expected to find css "div.navbar-default" but there were no matches
Why is this not working? I have a div with the class 'navbar-default', so this should work as far as I can work out.
Edit / Solved:
I realised my mistake. I have to expect statements, the navbar-default class is in a nav tag, not a div tag. The 2nd statement is in a div tag but wasn't running due to the error on the first one.
I've fixed it now, all working
The have_css matcher is applied to the parent container instead of the actual element. Is there a parent container?
Try something like this:
# Find the parent
parent = page.find('div#nav')
# Check for the nested div
expect(parent).to have_css(".navbar-default")
I'd like to ask for a little nudge to get my brain out of the box I got it into.
Context
Angular 4 using Angular CLI and AoT.
All methods mentioned in https://angular.io/docs/ts/latest/guide/component-styles.html describe ways to set complex CSS of a component while it is being written by a developer.
After a component is created, Angular allows to adjust individual styles and even assign various CSS class names to tags in the component as you please, all that using [ngClass], <div [class.something]="condition">, various #HostBinding decorators and some other methods.
However, none of the above can change the CSS declaration the component is using. The methods above can either (a) use what is already available in the stylesheet defined by the developer or (b) set individual CSS properties to individual HTML tags in the component's template.
Question
How would I update the CSS for the whole component on runtime so that all elements in that component respond to the new CSS?
Say I introduce a new style for a div.someClass and I want all matching elements div.someClass to reflect the new style.
Plunker
A showcase of my attempts is here: https://plnkr.co/edit/N2C40cSb7hd1AyOxWWdT
The button should be red, based on the value of MyChildComponent.styles
I think I understand why it doesn't work the way I would expect: shortly said, styles are built in the component during compilation, not runtime, including those found inside <style /> tags in the template.
But knowing why it doesn't work doesn't help me to make it work.
Any help highly appreciated.
Solution 1
Inserting a new css class is not possible ( as far as i know ) but you can insert css properties to your component dynamically.
I modified your dynamicStyles() to this
get dynamicStyles(): any{
return {'background': 'red' };
}
that returns an object instead of string because you will pass this object to ngStyle of your button.
In your template, I change the button like this
<button type="button"
[ngStyle]="styles">
Button
</button>
Here's a plunkr
Solution 2
This is something that I would not recommend but in your case it might be useful. You can add this
encapsulation: ViewEncapsulation.None
and the import
import {ViewEncapsulation} from '#angular/core'
to your #Component.You can leak your component's css so that you can use it on your child component. Then in your child component, add a [ngClass] in your button so that you can just pass a variable via #Input() if it should be red.
<button type="button"
[ngClass]="{'redButton': isButtonRed}"
>Button</button>
And in your style.css
.redButton{
background:red;
}
And in your main component.
<div>
<h2>Hello name</h2>
<my-child [isButtonRed]="true"></my-child>
</div>
Here's another plunkr
Hope this helps.
This challenge is best illustrated with a little example:
import React from 'react'
import styles from './styles.pcss'
const Spinner = () => (
<article className={styles.spinner}>
{/* <div> elements here*/}
</article>
)
export default Spinner
I'd like to change the position of the spinner component so this has to be done by the parent of the spinner. I see 3 solutions:
Use a CSS rule targeting the <article> tag (the root element of the spinner). I don't like this as the parent component is making assumptions about the internal structure of the spinner. If this tag changes, then all styles targeting it will break. I must be able to change the internal structure of my components without worrying about breaking many areas of my app.
Pass a className down to the spinner component. It's much better as no assumption is made regarding the internals of the spinner. But as potentially every component could be positioned by their parent (a very common CSS task), I would have then to implement the className being passed down (incl. prop types validation, etc) for every component that would need custom styling. There must be a better solution.
import React, { PropTypes } from 'react'
import classNames from 'classnames'
import styles from './styles.pcss'
const Spinner = ({ className }) => (
<article className={classNames(styles.spinner, className)}>
{/* <div> elements here*/}
</article>
)
Spinner.propTypes = {
className: PropTypes.string
}
export default Spinner
Use a containing <div> around the component I want to style:
<div className="spinner"><Spinner /></div>
But this leads to bloated markup with unnecessary <div>s in situations where many elements have to be styled (like setting their positions).
What are your recommendations?
Thx
I'm leaning towards solution 3. This way, the styled component (spinner) stays clean and doesn't have to implement additional logic for getting a className, validating it and merging it with its own classes.
I wanted to see how 3rd party libraries implemented this scenario, and they favor solution 3 as well. Here's the related discussion about styling <FormattedMessage> of react-intl.
Furthermore, the wrapping <div> would only be used when styling the container itself (typically, the position), not the contents of the component. And if many components have to be positionned, it's very likely that they are subcomponents, ex: <TodoItemList> and in this case the <TodoList> parent component would pass down the className to them as they won't exist outside this particular context.