Я изучаю, как использовать css modules
с реакцией, ниже приведен рабочий пример флажка, вот как это выглядит ( чистый HTML + скрипт CSS) без реакции.
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './checkbox.css'
export function Checkbox (props) {
return <div styleName="checkbox--container">
<input styleName="checkbox" type="checkbox" {...props}/>
<span styleName="checkbox--styled"></span>
</div>
}
export default CSSModules(Checkbox, styles)
Это здорово и все такое, но допустим, мой клиент возвращается и хочет, чтобы я изменил цвет флажка. Хорошо, кажется достаточно легко? Эта скрипка выше показывает, что есть пара шестнадцатеричных кодов (# 479ccf) для границы и внутри фонового изображения SVG. В идеале я мог бы передать реактивную опору, которая позволяет вам сделать что-то вроде этого <Checkbox color="#666333"/>
и бах! Однако я не могу найти документацию/способ получить информацию из компонента в файл CSS.
Что это значит?
Я знаю, что ответное сообщество собирается сказать, этот конкретный набор CSS не идеален. Это может быть написано в javascript внутри компонента, и оттуда вы можете установить встроенные стили частей флажка в цвет опоры. Я уверен, что это возможно. Это необходимо? Мне пришлось бы реорганизовать код ::after
, вопрос об этом.
Я начал делать функции SVG.
function SVGDash (color) {
return `data:image/svg+xml;charset=US-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2012%2012"%20enable-background%3D"new%200%200%2012%2012"><style%20type%3D"text%2Fcss">circle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23${color}%20%21important%3B%20%7D<%2Fstyle><path%20d%3D"M6%200"%2F><path%20d%3D"M.8%207C.3%207%200%206.7%200%206.2v-.4c0-.5.3-.8.8-.8h10.5c.4%200%20.7.3.7.8v.5c0%20.4-.3.7-.8.7H.8z"%2F><%2Fsvg>`
}
function SVGCheck (color) {
return `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23${color}%20%21important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M23.6%205L22%203.4c-.5-.4-1.2-.4-1.7%200L8.5%2015l-4.8-4.7c-.5-.4-1.2-.4-1.7%200L.3%2011.9c-.5.4-.5%201.2%200%201.6l7.3%207.1c.5.4%201.2.4%201.7%200l14.3-14c.5-.4.5-1.1%200-1.6z%22%2F%3E%3C%2Fsvg%3E`
}