I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.
But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").
Is there any way we can customize the theme in Semantic-UI-React? Thanks in advance!
This link may also help in addition to the theming page on the docs site.
https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/
It has a setup script after you run
npm install --save-dev semantic-ui
Yes there is a way to customize themes and create your own
https://react.semantic-ui.com/theming/
Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.
One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables. Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.
https://semantic-ui.com/usage/theming.html#browsing-for-themes
Related
I'm new to Gatsby and I started a project using a starter, Gatsby-starter-ghost. The starter comes with the Casper theme, and now I want to replace Casper with a new theme or build a custom theme.
I can't figure out how to replace Casper or even find where it is in the project folders. There is a lot of documentation available on Gatsby themes and starters but I can barely find any documentation for gatsby-starter-ghost. I've dug through the node_modules and src folders and can't even find where the Casper theme is located. If I install a new theme with npm and put the plugin in the gatsby-config file it breaks my project and I get GraphQL errors galore. I've read that themes should usually be in the content folder, but my content folder contains nothing but two empty folders.
Here is my project structure:
How do I replace the theme in the gatsby-ghost-starter?
Gatsby Themes use a concept called 'shadowing'. You can replace any of the default files for the theme by placing a file with the same path and name in your content folder. This is probably why your folder doesn't have any theme files, the starter is just using all the defaults.
That said, looking at gatsby-starter-ghost, it doesn't look like it's using a Gatsby Theme at all, so shadowing doesn't apply.
If you look at gatsby-starter-ghost/src/components/common/, it has various files which define the components that are being used. Most notably, Layout.js is setting out the base structure for every page, and imports a CSS file from ../../styles/app.css.
This CSS, those common components, as well as the various template files in src/templates are what is defining the HTML structure of the pages, and the CSS that those use. If you adjust those, you should be able to change the design to suit your needs.
Start by looking at app.css and adjusting it a bit, see how far that takes you. But you may need to update the components if you want to introduce new classes or change the HTML structure.
Context
New electron user here. I just cloned and installed the recommended React + Electron repo: https://github.com/electron-react-boilerplate/electron-react-boilerplate
Now I want to use Material-UI. So I thought I just follow the instructions here:
https://material-ui.com/getting-started/installation/
After I did this, the app doesn't show me anything from Material-UI. I created a Component with a simple App Bar. But it does show nothing.
So I found out that there is another package.json in the folder /app/package.json
I cd'd into it and redid the installation. Restart the dev server but still nothing shows up (no appbar, just white screen).
Here is a screenshot:
Also according to the docs I should add a link for the roboto font to the html file. Where is this supposed to go? I put it into the only html file I found in app/app.html.
How can one set up Material-UI with Electron or rather this specific boilerplate?
I couldn't find anything up to date for this question.
I found the error. Turns out I imported MenuIcon but material doesn't export it. So when I get rid of it, the appbar renders correctly.
I am trying to use material UI with react.
On this website: https://jamesmfriedman.github.io/rmwc/installation
It says
material-components-web should be installed automatically as a peer dependency. Include node_modules/material-components-web/dist/material-components-web.min.css in your project via your method of choice (using a link tag, a css-loader, etc.).
But I am not sure what this actually means. How and where do I have to import that file to use this library?
At first, you should add the library to your project by running:
npm install --save rmwc or yarn add rmwc
Secondly, you should understand the following:
Generally speaking, Material Components Web library is actually a bunch of prebuilt design styles that you can link to your project to make it look Material.
The library that you are using, React Material Web Components [RMWC], is a React wrapper for the previous library. It means that it gives you a set of flexible React Components like <Button />, <TextField />, etc that are built in React and act in a virtual DOM.
It doesn't give any specific styling to the elements. Moreover, it is designed not to provide you any extra styling. To make your imported React components look Material, you should add the styling from the parent library [Material Components Web].
To add styling from that library, use the following:
Add it to your project:
npm install material-components-web or yarn add material-components-web
And then use the following line (use it once in your project):
import 'node_modules/material-components-web/dist/material-components-web.min.css';
RMWC does the ReactJS wrapping. The styling is still all done by MDC.
You can add the minified mdc css file to your project, but that will not give you much customization. I'd advise using sass for your project and importing that mdc modules there. This way you can change variables e.g. from primary color as explained here: https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme
$mdc-theme-primary: #fcb8ab;
$mdc-theme-secondary: #feeae6;
$mdc-theme-on-primary: #442b2d;
$mdc-theme-on-secondary: #442b2d;
#import "#material/button/mdc-button";
A more in depth documentation on how to use styling specifically with RMWC can be found in the docu: https://jamesmfriedman.github.io/rmwc/styling
But overall you can either create your own classes you then apply to your elements such as buttons. E.g.
.my-button-style {
border-radius: 10px;
}
Or you override the mdc classes directly.
.mdc-button {
border-radius: 10px;
}
The mdc classes can be found in each of the package sites on GitHub. (e.g. for button: https://github.com/material-components/material-components-web/tree/master/packages/mdc-button)
I have an ejected React app that is based on Create-React-App, and I am trying to install the #salesforce/design-system-react package to use the Salesforce lightning components in it. But to use this package is not as easy (seems that I need some extra configuration for Barbel and Webpeck). I don't have much experience on config Barbel and Webpeck and need some help to get me started.
Can someone please let me know how can I get that .BABELRC and the Webpack v1 files described from this site: https://react.lightningdesignsystem.com/getting-started/ ?
Many thanks,
No need to configure anything. Just import the CSS.
In your index.js, add the following line.
import "#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css";
Now you should remove the styling in App.css since the default styling in Create React App will affect your Lightning Components (font-size for example)
currently to install and run material-ui docs locally, it requires two npm install, one within material-ui, another within material-ui/docs.
cd <project folder>/material-ui
npm install
cd <project folder>/material-ui/docs
npm install
But I want to use the docs site as a starting point to create my own app. How can I install the docs without installing the whole material-ui? I've tried adding "material-ui": "^0.14.4",, and ALL dependencies in material-ui/package.json to the material-ui/docs/package.json.
With that, npm install doesn't complain anything, but when I do npm run start or npm run browser:development, it doesn't work. Instead, it spits out whole bunch of error message (see below for part of it).
ERROR in ../src/table/table-header-column.jsx
Module build failed: ReferenceError: Unknown plugin "transform-replace-object-assign" specified in "/home/ubuntu/repos/tutorials/mui/.babelrc" at 0, attempted to resolve relative to "/home/ubuntu/repos/tutorials/mui"
.....
Please advise! Thanks.
I have teased the MUI-Docs site from parent MUI here in this repo: https://github.com/lmaccherone/material-ui-template.
In addition to removing the dependency upon parent material-ui, it has these advantages:
DRY and n-levels of left nav menu. To add/modify the left nav of the original MUI docs, you had to modify no
less than three different source files. This template will automatically adjust the left-nav based upon app-routes.js
including n-levels deep.
Custom theme in the project. MUI is designed to be themable and comes with two nice themes, but it's not
immediately obvious how to activate a custom theme in context for all components. The Themes page now has three
themes and it defaults to the custom one, so if you remove the Themes page, it will start up with your theme rather
than one of the prebuilt ones. Just modify customBaseTheme.js. I also modified many components and pages to use the theme. There were many places where inline settings didn't honor theme colors and spacing.
Highcharts. There is an example chart page that uses Highcharts and react-highcharts.
Advanced Table. It includes a component that renders a table where you can click on the columns to accomplish sorting.
Note, that repo has two pages specific to Pendo (a company I'm working with). They won't render correctly unless you have permissions for Pendo, but you can easily remove those two page by removing the folder by that name and removing it's routes from app-routes.js. I plan to clean that up and move Pendo specific stuff into it's own repo, but it was just easier to have it here as examples.