I have a border layout in my viewport. Within the border layout, I have a "header" section and a "navigation" section.
The folder structure looks like this:
I'm trying to add style to the header portion only.
I created a "Header.scss" file in my "sass/src/view/main/header" folder:
As I understand the documentation on styling the view in the app, when you create a matching folder and file structure in the sass/var/view folder, the styles in that scss file should apply ONLY to the given class in the app folder.
I added the following rule to the Header.scss file:
//in Header.scss
$panel-body-background-color: red;
The body background color does change for the header, but it also changes for all panels in the viewport.
Am I misunderstanding how the sass var folders are supposed to work? How would I apply the style rules to only the header class?
when you create a matching folder and file structure in the
sass/var/view folder, the styles in that scss file should apply ONLY
to the given class in the app folder
Not true.
Matching folder and *.scss file names will simply make sure that the file is included in the build — if and only if the corresponding app class is included / in use. Beyond that, Sencha CMD does not intervene in how SCSS is processed and CSS styles are applied — it is all left up to Compass and web browsers.
Am I misunderstanding how the sass var folders are supposed to work?
So yes, you are.
Merely by assigning a new value to a previously defined SCSS variable in a certain *.scss file corresponding to its JS mate, you are not limiting the variable's impact to the relevant app class. You are simply making sure that the assignment will only take place if the app class is included in the build. Once it is included, the variable's impact will be in accordance with how SCSS works — as if you had all those variables and rules in one file (which eventually is the case).
How would I apply the style rules to only the header class?
Use cls to make the header's panel different (or bodyCls), and put corresponding rules in sass/src/view/..../Header.scss:
.<my header panel css class> {
<panel body selector> {
// custom styling
}
}
First, I think the answer of Drake enterprise Systems is great. It covers 99% of the questions of the author. My answer is not meant to be considered as a better answer, it's more a complement for the solution Drake Enterprise Systems came up with.
The best way to style your apps is using a custom theme. It's not that hard, it's reusable and in line with how Sencha would like you to do it. There are several tutorials out there and of course Sencha has a great guide themselves.
For those who don't want to go all in I think using UI's is best practice. It's a great way to style your components. A UI is like a mixin, but with optional parameters (in the past you had to set every parameter, which was a pain in the ass). Most components already have a ui named 'default' and out-of-the-box can be changed to 'light'. You can also create your own ui's as we may expect from a flexible framework as ExtJs is.
If we look at the ui of a panel you can see that a lot of styling can be done through parameters. Here's an example of a custom ui for a panel:
#include extjs-panel-ui(
$ui: 'highlight',
$ui-header-background-color: red,
$ui-border-color: red,
$ui-header-border-color: red,
$ui-body-border-color: red,
$ui-border-width: 5px,
$ui-border-radius: 5px
);
Off course the ui can be set declarative:
// custom "highlight" UI
xtype: 'panel',
ui: 'highlight',
bind: {
title: '{name}'
},
region: 'west',
html: '<ul><li>This area is...</li></ul>',
width: 250,
split: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
Even if a xtype doesn't have an UI-mixin from default, the ui can be set and is added to the default class name, so for a container this would be x-container-mycustomui
Related
I'm looking to find best practices for providing developers the ability to style elements that exist within my React shared component.
For instance, I have a drop down and I wanted the developers to be able to select a predefined theme that would enable then to select a highlight color, font size, font family for the list element that exists within my drop down component. I created enums for the each of the default themes and provided a way to allow devs to define the theme object and add css to the properties that sat behind that enum. I then injected the style into the functional component.
However, I quickly realized that if I didn't provide a way for the developer to lets say adjust a facet of an element outside of the scope of the theme interface such as the font weight, the developer would not be able to style it and i'd have to go in and add it in and test that it works with all the other style combinations which became tedious and a lot of overhead.
I was wondering if there is an implementation whereby I provide refs to the elements in the component and provide and open-ended CSSProperties style prop that would allow the dev to style to their hearts content? Is there a best practice to do this? Please provide a short example if possible?
One caveat is that frameworks such as Next JS will encode the css modules and make it difficult to allow the user to provide css that'll manipulate the component due to the css element encoding or appended id's. This is why I thought the refs approach might work.
The best solution for you would be using :part . This allows styling through the shadow dom boundary of the parts of your component that you want.
See:
mozilla documentation
an explanation by the person who proposed this: explainer
and some other documentation
I was using Modal of semanctic-ui-react inside a create-react-app project. Inside index.js I had declared the import for the CSS files of the frameworks
import "semantic-ui-css/semantic.min.css"
import "bootstrap/dist/css/bootstrap.css"
I noticed the weird positioning of Modal. After debugging I found a .modal CSS class was getting applied which was coming from the Bootstrap's CSS. Since semantic-ui also has the similar name classes, this caused the overlapping.
On removing the import "bootstrap/dist/css/bootstrap.css", Modal get positioned correctly.
Solution(partial) in my mind:
import CSS file only in the class where it has been used, and not to the index.js
-this has two problems:
1. Suppose EditForm.js uses semantic-ui, I import the semantic.min.css
directly in this file. But what if it's parent class in which
EditForm.js is used, if parent.js is using bootstrap.css then again
the same problem will occur.
2. I am not sure on this, but importing the complete CSS seperately for each files could make those files heavy, please correct me here.
I want to use both the frameworks in my project, what would be the ideal way?
Do you have to use both of them? if so, another solution to consider is implementing SASS/SCSS in your project.
SASS is usually bundled in alot of webpack-using installations out-of-the-box. I have only used it in vanilla, Vue and Angular projects but i'm 100% sure React would have no problems with it and CRA would be able to generate the necessary configuration for it.
If you installed SASS, you have alot of ways to handle this. Two I would think of though are:
You can decide on one library that is your "main" and import it as normal, while the other one you can "scope" within a css rule. This is possible because SASS automatically unwraps the import and inserts it under that css rule, effectively "Scoping" it. CSS does not do that by default.
.smui {
#import "semantic.css";
}
Read more here: https://sass-lang.com/documentation/at-rules/import#nesting
I didn't check semantic UI's sass support, but Bootstrap is built modularly in SASS which allows you to selectively import the parts you need. So let's say you want to use a semantic button within Bootstrap's Grid layout. Instead of bringing over all of bootstrap, you can simply import the grid module.
#import "semantic-ui";
/* Required */
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
.bs {
/* Part you actually need */
#import "node_modules/bootstrap/scss/grid";
}
This would reduce the footprint to only what you need, reduce your CSS size, and reduce overlap of styling for elements/classes you do not want to be overwritten.
I would not recommend assigning an id to your component and writing your overrides there. That will force you to use that id everywhere throughout your application, which you do not want to do.
You have two options:
1) The easiest option would be to build your own version of Bootstrap that ONLY contains the styles for components you are actually using in your app. This is also going reduce the number of styles your user has to download to render your app. Just exclude "Modal" from the build (and any other bootstrap components you do not use).
2) Do a class comparison between the two libraries you are using. This should actually be easy to do with developer tools in any browser. You will see each time the component you are targeting matches a class in one of your style sheets. Some rules will be crossed out in one, some will be crossed out in the other. If you want the styles for Semantic UI to take precedence, you will want to make a separate stylesheet that increases specificity for the style properties that are being lost from Semantic UI. My guess is there are probably only a few style properties that are getting overridden or that you do not want.
You can also put the above styles in the style prop on your modal if you do not want to create a separate file and they will be added inline to the component, effectively being more specific than the styles in either CSS file.
This worked for me.
In a custom css file, insert the following rule
.modal {
top: auto !important;
left: auto !important;
height: auto !important;
}
I'm working on an app where each user can define custom colors for its dashboard. Like textColor, accentColor and backgroundColor;
The entire UI will use those colors.
I know how to set a css property dynamic but doesn't seem correct to do it every single element.
I was wondering if I can create a dynamic css and inject it into the app. (is it too much workaround?)
I managed to make it work by using a server-side generated theme.css (something like /users/1.css). Can you smell it?
What's the proper way to do it?
We've developed an application that had to be white label, so we've created directives for the editable items and the directives listened to the service that handled the layout package from server, overwriting if needed the property. In your case you could choose to have only textColor, accentColor and backgroundColor directives instead of each layout component have your own layout directive.
I'm currently looking for a way to actually receive an entire scss from server that would overwrite the variables inside Sass, but I could not find any approach yet.
I would also share this article, that could be helpful:
https://engineering.thetrainline.com/how-we-implemented-a-single-page-application-using-react-3f22e4d545c4
I've been loving checking out styled-components, but getting a bit stuck with the concept of extracting everything out into a component, and how to tweak styles for a particular use case. For example:
<Flex>
<MyStyledTitle>Hello I am a Title</MyStyledTitle>
<MyStyledBodyText>blah</MyStyledBodyText>
</Flex>
Let's say that I wanted to make the following customisations for this use case:
styled title grey (subdued text colour),
the body text to have a right margin of 100px (don't ask why).
The styled-components way, the first part could be done like:
<MyStyledTitle colorTint='subdued' />
or even
<MyStyledTitle>
<SubduedText>MyTitle</SubduedText>
</MyStyledTitle>
Perhaps using a prop for title that lets you configure it to use subdued text or ANOTHER hild component that defines the grey text..
But what about for the second option...
<MyStyledBodyText style={{paddingRight: 100}} />
Inline style? Use a Grid or layout component around it?
At which point does something become a specific styled-component and if not, then how does one customise smaller style changes?
While i really like this idea of removing the mapping between component + class name, I guess i'm feeling a bit torn between the classical idea of having a 'style sheet' file that can contain all the classes and modifier css, then using a presenter to choose between the combinations of css classes.
I might be missing something here, but just keen to see some bigger examples of styled components in practice. Any links / tips would be greatly appreciated!
We've been using styled-components in our project extensively. Few basic patterns/conventions we use are
Components created using StyledComponents are not used across React Components. Under extreme scenarios, we pull them into external files and export.
DIV is the most extensively used styled-component (styled.div). (Ofcourse we do use other html elements like button, table td etc., but styled explicitly).
Different styles for the same HTML element (or) React Component are declared explicitly as different styles. (If you refer to FAQ section of the styled-components docs, you might notice these - https://github.com/styled-components/styled-components/blob/master/docs/faq.md)
Overall to answer your question, we have moved away from the classical stylesheet and as well thinking about combining multiple styles. It has worked well, except that looking up on unit tests is a bit painful.
Thanks
I am working with ExtJS 4.1.1a and I am trying to create a new theme for both a "tabbedPane" and a normal Panel with and "Accordion" layout. I am having trouble changing the colour of the headers for each. That is to say the tabs and the background for the tabs as well as the header background and font colour for the accordion panel. You can see the current setup at http://robroscoe.ca. I am trying to get the headers for both to be black background with white text and maybe the selected or active tab to be the mat purple that is used in the breadcrumb portion in the navigation bar.
It should be noted that I am attempting to set everything up within ExtJS's SASS preprocessor and any assistance in modifying this instead of the CSS directly would be very much appreciated.
If you haven't yet, you should really start by familiarizing yourself with the approach to theming in ExtJS 4 - http://docs.sencha.com/ext-js/4-1/#!/guide/theming
Once you have a good understanding of the process, the easiest way I've found to theme specific components is by looking through the documentation. With the newer documentation, a lot of the CSS mixins are included along with the API for the components, so it makes it pretty simple to figure out how the default styles are being applied, and then go from their to override/create your own. Here's an example of the Ext.tab.Tab CSS mixin: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Tab-css_mixin-extjs-tab