Questions tagged [jss]

Use this tag for questions about JSS - A library for generating CSS from JavaScript.

JSS

A library for generating CSS from JavaScript.

Introduction

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.

JSS is framework agnostic. It consists of multiple packages: the core, plugins, framework integrations and others.

Links

Site: http://cssinjs.org/

Github: https://github.com/cssinjs/jss

494 questions
0
votes
2 answers

Refer to values in JSS theme in the theme it self

I’m using jss through react-jss. Let’s say that I have a theme where I have defined a base color. Then I want to define a default border in this theme, referring to the base color. const theme = { baseColor: ‘#aaaaaa’, defaultBorder: [[1,…
Vegar
  • 12,828
  • 16
  • 85
  • 151
0
votes
2 answers

Creating themeable react component with JSS

I'm having some trouble following the docs on how to get this to work I have a component that has some styles created, for the most part, all of these styles will apply to wherever this component is rendered but sometimes depending on what page the…
Jordan
  • 2,393
  • 4
  • 30
  • 60
0
votes
1 answer

Merge styles using JSS in react component

I'm new to using JSS but since we're building our current project with Material UI, I figured I would try to follow their style API using JSS with the custom components I have to build occasionally for the app. In this instance I can get the styles…
Jordan
  • 2,393
  • 4
  • 30
  • 60
0
votes
1 answer

How to supply background color as a prop for cards using Material UI in React JS?

Im using Material UI next and building a wrapper around the card component. This allows me to customise the component. Im able to extend the component such that the title and image present inside the card can be sent as props. However, the…
SeaWarrior404
  • 3,811
  • 14
  • 43
  • 65
0
votes
2 answers

Cannot read property 'createStyleSheet' of undefined

I am using jss and I want to simply add a global css to a page. My code: import jss from 'jss' import jssGlobal from 'jss-global' const styles = { '@global': { body: { margin: 0, } } } const sheet = jss.default …
GibboK
  • 71,848
  • 143
  • 435
  • 658
0
votes
1 answer

Integration Material-UI with third-party react components

Is there any recomended way how to style third-party components such as react-paginate with Material-UI primitives (bars, buttons)? Is it possible at all?
0
votes
1 answer

How to access custom namespaced (react-)JSS theme from components?

I'm creating a react/redux app, and want to utilize JSS theming to style my app/components. I'm also using other libraries that use JSS theming, e.g. Material UI, thus I need to create a namespaced theme as described in …
5ton3
  • 210
  • 4
  • 14
0
votes
1 answer

Trying to convert CSS overlay feature to JSS in React

Here is the CSS that I am trying to convert: .container { some CSS in here - figured that out } .overlay { some CSS i can convert - not sure on below line transition: .5s ease; } This is the CSS I am most struggling with…
0
votes
1 answer

Theme customization lost when rendering to string on client

I'm using material-ui-next and have customized the theme to use my color styles and a custom font. eg. Typography subheading I'm now attempting to render a component to string for use in a google maps info window. The default material-ui theme is…
Blaine Garrett
  • 1,286
  • 15
  • 23
0
votes
1 answer

How to access to nested object style in react-jss

I want to access this nested object in React JSS I am using injectSheet from React-JSS export const textStyle = { size: { '&:larger': { fontSize: '1.28em' }, '&:large': { fontSize: '1.250em' } } I am…
Sachin Kumar
  • 125
  • 5
0
votes
1 answer

Fill svg using jss
All I want is a fill color. The source file is #000, therefore no fill is specified in the svg code. Here's the JSX: import dashboardIcon from '../../images/icons/Dashboard-Icon.svg'
0
votes
3 answers

Using :not pseudo-class across components

I have a
component: const styles = theme => ({ section: { backgroundColor: theme.colors.primary, color: theme.colors.white, '& a:not(.button)': { color: 'currentColor', textDecoration: 'underline', }, …
Mike
  • 1,442
  • 10
  • 20
0
votes
2 answers

how to customize react material ui next component

I am using Material UI next branch i want to use the table component and i want to change the style of the TableHead Component. My idea was to wrap the TableHead with MyTableHead and add my own style to override the current style. my code(based on…
yossi
  • 12,945
  • 28
  • 84
  • 110
-1
votes
1 answer

Can someone help me to program a game menu in html?

I'm in the process of programming a game menu in html. However, I have no idea how best to do this. I have already watched many tutorials on Youtube etc. but none have worked so far. Maybe someone can help me here and tell me how to make a game menu…
-1
votes
1 answer

How does this convert into JSS?

I'm new to JSS and was wondering how the CSS below converts into JSS .spinnerContainer { animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; @keyframes spin { to { -webkit-transform:…
Yurdesou
  • 179
  • 1
  • 2
  • 6
1 2 3
32
33