We're currently building styled components. One of the downsides of styled components exported as components (currently) is that it allows the arbitrary injection of inline styles. That is, given this component:
const Flex = styled.div`
display: flex
`
Any engineer can come along and reference this like:
<Flex style={{ display: 'inline' }} />
The Styled Components docs tell you how to override inline styles passed to components, but do they not just provide a simpler option for preventing inline styles from being passed to components in the first place?
Related
I am trying to getByRole where I have an <li />, which is a child of a styled component.
The styled component is by default display: none, then under a min-width media query it's set to display: flex.
Running getByRole('listitem') works without the display: none but not with it, indicating that styled-components is telling the DOM that because it is set to display: none it doesn't exist.
This is despite the debug HTML output actually showing the <li /> being rendered:
TestingLibraryElementError: Unable to find an accessible element with the role "listitem"
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
<body>
<div>
<div>
<ul
class="sc-gzVnrw sc-VigVT kjwzNy"
>
<li><!-- bunch of stuff --></li>
</ul>
</div>
</div>
</body>
I have tried mocking the media query matching using jest-matchmedia-mock, with no luck.
I don't care about testing the media query or styles at all, so is there a way I can tell styled components to not apply the styles during testing?
I found a kind of solution which is a feature of dom-testing-library:
getByRole('listitem', { hidden: true })
This includes hidden items.
There is a commit detailing this change here: https://github.com/testing-library/dom-testing-library/pull/352/files/7cdfcfa466774ca78940330fe95d00c9e744b673
I write a website with Vue.js and to handle user interface, I want to use Vue Formulate. All in all it works, but I have trouble to style input errors. So, I tried to make a very simple example to change the background color from the error list, but it doesn't work.
That is my easy component:
<template>
<div>
<p>Test for VueFormulate</p>
<FormulateInput
type="text"
validation="required"
/>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
li.formulate-input-error {
background-color:green;
}
</style>
After the site is loaded and the error list element is there, I can change the background-color in the Google Chrome devtools. But not bevor.
I hope somebody can explain what I have to do to make it work.
Your style block is scoped meaning you cannot style elements that are not in your immediate <template> (that's the point of scoping). You have three options:
Remove the scoped portion of your <style> block. I don't really recommend this.
Move your general form styles to a global css file. I would recommend this if you use more than 1 input.
Use a deep selector like ::v-deep. This is great for case-by-case overrides, and allows you to select elements that are deeper than your current "scope". Here's an example:
<style scoped>
.formulate-input::v-deep li.formulate-input-error {
background-color: green;
}
</style>
Hi we've recently started making custom elements in Aurelia. One of the rules we have established is that we cannot put class names on custom elements when using them.
This is causing problems for me because the custom element itself doesn't have any properties so it breaks a lot of styling.
In particular it breaks when put inside a flex-container.
I have read on developers.google.com that you can style the custom element using the :host selector, but I can't find any mention of this for Aurelia and I'm struggling to get it to work.
I have a codepen to demonstrate the problem here.
You can style custom elements f.i. by referencing the element itself, like this:
o-custom-element {
color: white;
background: green;
flex-grow: 1;
}
I've forked your codepen to show the change: http://codepen.io/anon/pen/ZeEdLL
Put your custom element in the flex-item div:
<div class="half-container">
<p>Breaking because of custom element (Flex container is yellow)</p>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item green">
<o-custom-element></o-custom-element>
</div>
</div>
</div>
If you want to use :host, you'll have to put it in a <style> element inside the Shadow DOM of your custom element: http://codepen.io/anon/pen/LWYwxK
The problem is that you'll have to duplicate the rules and it's worse than adding classes to custom element...
I would like to know if there is a method to label and rename the text displayed by JSF Choose a File when I'm using the tag <h:InputFile> in JSF.
That's not possible with native HTML. The appearance and the button's label is browser-dependent. The particular "Choose File" label is recognizable as the one from Chrome with English language pack (e.g. FireFox uses "Browse..."). As JSF is in the context of this question just a HTML code generator, it can't do much for you either.
There are several ways to achieve this. All can be found in this HTML+CSS targeted Q&A: Styling an input type="file" button, particularly this answer.
Easiest way is to reference it via <h:outputLabel for>, style it to look like a button and hide the actual file upload component. Clicking the label element will as usual just delegate the click event to the associated input element. See also Purpose of the h:outputLabel and its "for" attribute.
Here's a non-IE compatible kickoff example (it's supported in IE's successor Edge):
<h:outputLabel for="file" value="Pick a file" styleClass="upload" />
<h:inputFile id="file" value="#{bean.file}" styleClass="upload" />
label.upload {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 2px;
cursor: pointer;
}
input.upload {
display: none;
}
If you'd like to support IE9+ too, replace appearance: button by a background and border. It's only harder to get it to look like a true button. The below is far from ideal, but should at least get you started.
label.upload {
padding: 2px;
border: 1px solid gray;
border-radius: 2px;
background: lightgray;
cursor: pointer;
}
If you'd like to support IE6-8 too, which won't delegate the label's click event to the hidden input element, then well, head to the aforementioned related question for CSS tricks on that and rewrite JSF code in such way that it generates exactly the desired HTML+CSS(+JS) output.
A completely different alternative is to grab an UI oriented JSF component library, such as PrimeFaces which is based on jQuery UI. See also its <p:fileUpload> showcase.
i want to override the below css to the title attribute in h:outputText.
css:
<style type="css/text">
.title
{
border : 1px solid #FF9933;
font-family : verdana;
font-size : 14px;
font-weight:normal;
color: #000000;
background-color:#fae6b0;
padding : 5px 5px 5px 5px";
}
</style>
<h:outputText id="userName"
value="#{userBean.userName}"
title="#{userBean.userName}"/>
<h:outputText id="userAddress"
value="#{userBean.userAddress}"
title="#{userBean.userAddress}"/>
With the help of below link. I tried to change the title attribute in html, it works fine.
How to change the style of Title attribute inside the anchor tag?
how to apply the same thing into the richfaces.
The tooltip as represented by the HTML element's title attribute is not styleable by CSS. The style is fully controlled by the webbrowser and is usually represented in client operating system platform default tooltip style. So, e.g. when the client is running Windows 7, then the tooltip will be presented in Windows 7 default style. Again, you have no control over this.
Your best bet is to replace the title attribute by a fullworthy HTML <div> which appears/disappears on mouseover/out. This allows full control over styling by the usual CSS means. As you already know, RichFaces has a <rich:tooltip> component which does exactly that. If it is insufficient for you for some reason, then you may want to consider to look for another JS/jQuery plugin which will automagically convert all title attributes to styleable <div> elements. One of them is qTip. All you need is then basically:
<h:outputScript name="scripts/jquery.qtip-1.0.0-rc3.min.js" target="head" />
<h:outputScript target="body">$("[title]").qtip();</h:outputScript>
(provided that you're using a RichFaces version which already ships with jQuery bundled, so that you don't need to manually include jQuery)