App Codex Version: 1.0.0

Class

CssApi

CssApi()

Style Hooks. Instance name: cssApi

The hooks are used to modify various styling options for the app.

Constructor

# new CssApi()

Example
externalCodeSetup.cssApi.METHOD_NAME

Methods

# addCustomColors(newCustomColors)

Adds a new color into a global colors object that is accessible in components through redux store.config.styles.colors. If an existing color name is used to add a new color (ex: successColor), this will overwrite the value of the existing color.

Parameters:
Name Type Description
newCustomColors Object.<String, String>

Object with new colors
Example
//In custom_code/index.js

...

export const applyCustomCode = externalCodeSetup => {
	externalCodeSetup.cssApi.addCustomColors({"courseNewColor": "#800000"});
}

//The following below demonstrates how to use the newly added global style:

//In custom_code/components/StyleComponent.js

...

import { globalStyle } from "@src/styles/global";

const StyleComponent = (props) => {
  const globalStyles = useSelector((state) => globalStyle(state.config.styles))
  const { colors, global } = globalStyles;
  return <Text style={{color: colors.courseNewColor}}> Margin 10 </Text>

}

export default StyleComponent

# addGlobalStyle(styleName, style, replace)

Adds a new style into global style object. Note: styles with same names will be merged by Object.assign.

Parameters:
Name Type Description
styleName String

Name/handle of style
style RNStyleValue
replace Boolean

If true, original style will be replaced. Otherwise styleName: [oldStyle, newStyle] will be used
Example
//In custom_code/index.js

...

export const applyCustomCode = externalCodeSetup => {
	externalCodeSetup.cssApi.addGlobalStyle("coursesNewStyle", {margin: 10}, false);
}

//The following below demonstrates how to use the newly added global style:

//In custom_code/components/StyleComponent.js

...

import { globalStyle } from "@src/styles/global";

const StyleComponent = (props) => {
 const globalStyles = useSelector((state) => globalStyle(state.config.styles))
 const { colors, global } = globalStyles;
 return <Text style={global.coursesNewStyle}> Margin 10 </Text>

}

export default StyleComponent

# setFilterContentCss(filterContentCss)

Sets a callback function filterContentCss that is able to change the CSS that is used on post content WebViews. This will also give style to HTML Gutenberg blocks. Note: If Gutenberg is not in use, then app fallbacks to WebViews to show content

Parameters:
Name Type Description
filterContentCss CssToCssCallback
Example
externalCodeSetup.cssApi.setFilterContentCss((htmlContentCss, typography) =>
  (`
    body, p {
      font-family: "${typography.bodyText.family}";
      font-size: 100px;
    }
  `)
);

# setInputColors(inputColors)

Override colors of certain input fields such as in quiz form, xProfile edit form, manage group details and manage group settings form.

Parameters:
Name Type Description
inputColors InputColors
Example
externalCodeSetup.cssApi.setInputColors({"inputPlaceholderColor": "red"})